typescript - 什么是 Angular 2 中的 `change` 事件

Question

什么是 Angular 2 中的 change 事件？什么时候发货，如何使用？
IE。我通过 (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;
  }
}

附言: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;
  }
}