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

あなたは、あなたはこのようなあなたの親コンポーネントで、このイベントには、 "購読" @Output

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

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

} 

とあなたの子コンポーネントにEventEmitterを定義します。

@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