Angular2 EventEmitter

可能你對EventEmitter還不太熟悉，不過別擔心，它並不難。
EventEmitter只是一個幫你實現觀察者模式①的對象。也就是說，它是一個管理一系列訂閱者並向其發布事件的對象。就是這么簡單。
來看一個使用EventEmitter的簡單小例子：

let ee = new EventEmitter();
ee.subscribe((name: string) => console.log(`Hello ${name}`));
ee.emit("Nate");
// -> "Hello Nate"

當我們把一個EventEmitter賦值給一個輸出的時候， Angular會自動幫我們訂閱事件。我們不需要自己訂閱。（當然，如果需要，你仍然可以實現自己的訂閱邏輯。）

下面是一段具有outputs的組件示例代碼：

@Component({
    selector: 'single-component',
    outputs: ['putRingOnIt'],
    template: `
<button (click)="liked()">Like it?</button>
`
})
class SingleComponent {
    putRingOnIt: EventEmitter<string>;
    constructor() {
        this.putRingOnIt = new EventEmitter();
    }
    liked(): void {
        this.putRingOnIt.emit("oh oh oh");
    }
}

可以看到我們做了完整的三步動作：(1) 指定outputs配置項；(2) 創建一個EventEmitter並把它賦值給我們指定的輸出屬性putRingOnIt；(3) 當liked方法被調用時，觸發這個事件。
如果希望在一個父級組件中使用這個輸出，可以這樣做：

@Component({
    selector: 'club',
    template: `
<div>
<single-component
(putRingOnIt)="ringWasPlaced($event)"
></single-component>
</div>
`
})
class ClubComponent {
    ringWasPlaced(message: string) {
        console.log(`Put your hands up: ${message}`);
    }
}
// logged -> "Put your hands up: oh oh oh"

再來回顧一下：

• putRingOnIt是在SingleComponent的outputs配置項中定義的；
• ringWasPlaced是ClubComponent中的一個方法；
• $event包含被觸發事件參數（輸出的內容），在這個例子中是一個字符串。

 

摘自：《Angular權威教程》第78頁