将指令外部的值传递给父指令时出现“错误：未定义输出”

Question

我有一个根应用程序组件，它在模板中这样定义。

template: `
<dev-table (complete)="onSelect(developer)"></dev-table>
<dev-details [selectedDeveloper]="selectedDeveloper"></dev-details>
`
directives: [DevDetailsComponent, DevTableComponent],
providers: [DevValueService, provide(DevService, {useClass: DevService})]

是一个列表，在选择其中一个内部列表时，它应该发送列表（开发者）的值，该列表作为选定的开发者传入。 @Input 定义正确并被正确考虑。但是@output 给出了错误Error: Output is not defined 需要什么定义或定义方法是什么。我错过了一些东西。

这是类定义：

@Component({
  selector: 'dev-table',
  template: `
    <ul class="dev">
      <li *ngFor="#developer of developers"
        [class.selected]="developer === selectedDeveloper;this.complete.next();"
        (click)="onSelect(developer)">
        <span class="spanbackground">{{developer.name}}</span> -  {{developer.skill}}
      </li>
    </ul>  
  `, 
  providers: [DevService]
})

export class DevTableComponent implements OnInit{
    public developers : Developer[];
    public selectedDeveloper : Developer;
    constructor(private _DevService: DevService) { }
    @Output() complete = new EventEmitter(); 
    public onSelect(developer: Developer) { this.selectedDeveloper = developer; }
    getDevelopers(){
      this._DevService.getDevelopers().then(developers => this.developers = developers)
    }
    ngOnInit(){
      this.getDevelopers();
    }
}

更新：最终的工作代码没有developer === selectedDeveloper;this.complete.next();，而是将this.complete.next() 放入onSelect 函数中。

Answer 1

“@output 给出错误错误：未定义输出需要什么定义或定义方法是什么。我遗漏了一些东西。” ：

import {Output} from "angular2/core";

您必须导入您正在使用的任何类的定义。

Answer 2

如果您想将值传递给父组件，您可以利用自定义事件。这段代码位于父组件的模板中：

@Component({
  (...)
  template: `
    <dev-table (complete)="someMethod($event.value)"></dev-table>
  `
})
export class ParentComponent {
  someMethod(value) {
    console.log('complete event - value = ' + value);
  }
}

要触发事件，您可以在子组件中执行类似的操作：

@Component({
  (...)
  template: `
    (...)
    <span (click)="triggerCompleteEvent()">Trigger complete event</span>
  `
})
export class DevTableComponent implements OnInit{
  @Output()
  complete:EventEmitter;

  constructor() {
    this.complete = new EventEmitter();
  }

  triggerCompleteEvent() {
    this.complete.emit(someValue);
  }
}

someValue 对应于您希望事件包含并且事件订阅者可以获得的值。

希望对你有帮助 蒂埃里