`Ошибка: вывод не определен` при передаче значения вне директивы родительской директивы

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

Если вы хотите передать значение родительскому компоненту, вы можете использовать пользовательское событие. Этот код находится в шаблоне родительского компонента:

@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 соответствует значению вы хотите, события и подписчики событий могут получить.

Надеется, что это помогает вам, Тьерри

Answer 2

«@output дает ошибку об ошибке.. Выход не определен Какое определение требуется или что метод определения я что-то не хватаю» :

import {Output} from "angular2/core";

Вы должны импортировать определение любого класса, который вы используете.