Angular 2中的“change”事件是什么？

Question

Angular 2 中的“change”事件是什么？它何时被触发，如何使用？例如在以下代码中我通过“(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： 同样的问题的俄语翻译。

- Qwertiy

---

我很惊讶它能够工作。感觉像是 Angular 的一个 bug。 - maxisam

Answer 1

这就是事件冒泡：在 input 上触发了 change 事件，然后通过 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;
  }
}

- Qwertiy

---

我们实际上可以在任何地方使用（改变）它。这让我感到非常惊讶。 - maxisam

Answer 2

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

- Maximilian Riegler

---

我的代码 正常运行。如果你打开 plunker，你会看到在点击复选框后，变化次数不断增加。在 你的代码 中，每次点击复选框时 change 被调用了 两次。 - Qwertiy

我找到了原因。感谢您在输入上使用(change)的工作代码 - 在我的初始版本中，它没有起作用，因为我将EventEmitter命名为change。 - Qwertiy

Answer 3

它只是一个事件发射器。例如，如果您查看Angular mat设计的源代码中的mat-select，您会看到，但在这种情况下，是selectionChange

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

- Gh111