什么是 Angular 2 中的“更改”事件答案

【问题标题】：What is `change` event in Angular 2什么是 Angular 2 中的“更改”事件
【发布时间】：2016-07-06 15:28:34
【问题描述】：

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

PS：Same question in Russian.

【问题讨论】：

我很惊讶它的工作原理。感觉就像一个来自角度的错误。

标签： typescript angular

【解决方案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;
  }
}

【讨论】：

所以我们实际上可以在任何地方使用（更改）。这真让我吃惊。

【解决方案2】：

change 事件通知您输入字段中发生的更改。由于您的内部组件不是原生 Angular 组件，您必须自己指定事件发射器：

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

【讨论】：

My code 正在工作。如果您打开 plunker，您会在单击复选框后看到不断增加的更改数量。在 you code change 中，每次单击复选框时都会调用两次。
我找到了原因。感谢您在输入时使用 (change) 处理代码 - 在我的初始版本中它不起作用，因为我将 EventEmitter 命名为 change。

【解决方案3】：

它只是一个事件发射器。例如，如果您查看 Angular mat design 的 source code for mat-select，您可以看到，但在这种情况下，selectionChange

@Output() readonly selectionChange: EventEmitter<MatSelectChange> =
      new EventEmitter<MatSelectChange>();

【讨论】：