角2の `change`イベントとは何か

Question

角2のchangeイベントとは何ですか？それはいつ発送され、どうすれば使えますか？
I.e.私は(change)="update()"経由で次のコードを購読していますか？

http://plnkr.co/edit/mfoToOSLU6IU2zr0A8OB?p=preview

import {Component, View, Input, Output, EventEmitter, OnChanges} from '@angular/core' 

@Component({ 
    selector: 'inner-component', 
    template: ` 
    <label><input type="checkbox" [(ngModel)]="data.isSelected"> Selected</label> 
    ` 
}) 
export class InnerComponent { 
    data = { isSelected: false }; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <p><inner-component (change)="update()"></inner-component></p> 
    <p>The component was updated {{count}} times</p> 
    `, 
    directives: [InnerComponent] 
}) 
export class AppComponent { 
    count = 0; 

    update() { 
    ++this.count; 
    } 
} 

PS：Same question in Russian。

Answer 1

： changeがinputに発生し、domツリーによってバブルし、inner-component要素で処理されます。

http://plnkr.co/edit/J8pRg3ow41PAqdMteKwg?p=preview

@Component({ 
    selector: 'my-app', 
    template: ` 
    <p><inner-component (change)="update($event)"></inner-component></p> 
    <p>The component was updated {{count}} times</p> 
    `, 
    directives: [InnerComponent] 
}) 
export class AppComponent { 
    count = 0; 

    update($event) { 
    console.log($event, $event.target, $event.currentTarget); 
    ++this.count; 
    } 
} 

Answer 2

changeイベントは、入力フィールドで発生した変更を通知します。あなたの内側のコンポーネントは、ネイティブの角度成分ではないので、あなた自身エミッターイベントをspecifiyする必要があります。

@Component({ 
    selector: 'inner-component', 
    template: ` 
    <label><input type="checkbox" (change)="inputChange.emit($event)" [(ngModel)]="data.isSelected"> Selected</label> 
    ` 
}) 
export class InnerComponent { 
    @Output('change') inputChange = new EventEmitter(); 

    data = { isSelected: false }; 
} 

をそして、あなたのAppComponentに今のイベントを受信して​​いる：

イベントバブリングです

@Component({ 
    selector: 'my-app', 
    template: ` 
    <p><inner-component (change)="update($event)"></inner-component></p> 
    <p>The component was updated {{count}} times</p> 
    `, 
    directives: [InnerComponent] 
}) 
export class AppComponent { 
    count = 0; 

    update(event: any) { 
    ++this.count; 
    console.log(event); 
    } 
}