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頁