Che cos'è l'evento `change` in Angular 2

Question

Che cos'è l'evento change in Angular 2? Quando viene inviato e come posso usarlo?
I. e. cosa ho sottoscritto nel seguente codice tramite (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

Questo è spumeggiante evento: change si verifica su input, quindi bolle da albero di dom e viene gestito sull'elemento inner-component. Può essere controllato dal disboscamento ed evento:

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

L'evento change notifica l'avvenuta modifica in un campo di input. Dal momento che il componente interna non è un componente angolare nativa, è necessario specifiy l'evento emettitore da soli:

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

E nel tuo AppComponent si sta ora ricevendo gli eventi:

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