Angular 4 - html 输入元素更改事件触发 @Input() 设置器与 OnPush 策略

Question

我有一个简单的组件：

@Component({
  // ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {

  private _items: string[];

  @Input()
  set items(items) {
    console.log('setter of items: ', items); // verify call
    this._items = items;
  }

  onChangeValue(event) {
    console.log('on change value', event);
  }
}

这是模板：

<div *ngFor="let item of _items">
  {{item}}
</div>

<input type='text' (change)='onChangeValue($event)'>

问题：
为什么在 input 元素中更改文本并调用 onChangeValue 函数后调用 setter @Input() set items(..)。

我以为Angular的变化检测策略OnPush会触发@Input() set items(..)函数if and only if父组件传入一个新的项目引用到这个组件。

不过，@Input() set items(..) 也会在输入文本发生变化时触发。

为什么？

Answer 1

如this S.O. post中所述：

OnPush 就是这样定义的。

触发变更检测

1. 接收到组件侦听的 DOM 事件时
2. 当 |async 管道接收到新事件时
3. 当 @Input() 被更改检测更新时。
4. 在使用 ChangeDetectorRef::markForCheck 显式注册要检查的下一个更改检测轮次的组件时

ChangeDetectionStrategy.Default 触发每个变化检测 在 Angulars 区域内调用的异步回调（每个 DOM 甚至都听过 在 Angular 应用程序中，每个 Observable 事件或已完成 承诺，setTimeout，...）

因此，在您的情况下，更改检测是由组件侦听的 DOM 事件触发的。