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