Was ist `Change` Ereignis in Angular 2

Question

Was ist change Ereignis in Angular 2? Wann wird es versendet und wie kann ich es verwenden?
I. e. Was habe ich im folgenden Code über (change)="update()" abonniert?

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

Das Ereignis sprudelnden ist: tritt auf input, dann Blasen von Dom Baum und wird auf inner-component Element behandelt. Es kann durch Protokollierung und Ereignis überprüft werden:

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

Das Ereignis change informiert Sie über eine Änderung in einem Eingabefeld. Da Ihre innere Komponente keine native Angular Komponente ist, müssen Sie die Ereignis-Emitter selbst 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 }; 
} 

Und in Ihrem AppComponent sind empfangen Sie jetzt die Ereignisse:

@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); 
    } 
}