Angular2 EventEmitter fire to parent component

Question

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

@Component({ 
template:'<foo></foo>' 
}) 
export class ParentComponent{ 
    onDoSomething($event){ 
    //do work here 
    } 

} 

@Component({ 
selector:'foo' 
template:<button (click)="onClick($event)">MyButton</button> 
}) 
export class ChildComponent{ 
    myEvent eventName = new EventEmitter(); 

    onClick(button){ 
     this.eventName.emit(button); 
    } 

} 

Как заставить это работать?

Answer 1

Вы определить EventEmitter в вашем ребенка компонент с @Output

@Component({ 
selector:'foo', 
template:`<button (click)="onClick($event)">MyButton</button>` 
}) 
export class ChildComponent{ 
    @Output() myEvent = new EventEmitter(); 

    onClick(button){ 
     this.myEvent.emit(button); 
    } 

} 

тогда вы "подписаться" на это событие в вашем родительском компоненте, как это:

@Component({ 
    selector: 'my-app', 
    template: `Hello World <foo (myEvent)="myEvent($event)"></foo>`, 
    directives: [], 
    providers: [] 
}) 
export class AppComponent { 

    myEvent($event){ 
     console.log(1, $event); 
    } 
} 

Полный пример: http://plnkr.co/edit/MeQbC7Jbc8rprMF66aEF?p=preview