Sự kiện `thay đổi` trong Angular 2

Question

Sự kiện change trong Angular 2 là gì? Khi nào nó được gửi đi và tôi có thể sử dụng nó như thế nào?
I. e. tôi đã đăng ký mã sau đây qua số (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

Đó là sự kiện bọt: change lần xuất hiện trên input, sau đó bong bóng bằng cây dom và được xử lý trên phần tử inner-component. Nó có thể được kiểm tra bằng cách khai thác gỗ và sự kiện:

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

Sự kiện change thông báo cho bạn về thay đổi xảy ra trong trường nhập. Kể từ khi thành phần bên trong của bạn không phải là một thành phần góc bản xứ, bạn phải thể chỉ định sự kiện này phát mình:

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

Và trong AppComponent bạn ngay bây giờ bạn đang nhận được sự kiện:

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