Angular2 EventEmitter觸發父組件

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