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() set items(..)元素中更改文本并调用input函数后调用setter onChangeValue。

我认为Angular的更改检测策略OnPush将触发@Input() set items(..)函数if and only if，父组件将新项目引用传递给此组件。

但是，当输入文本发生变化时，也会触发@Input() set items(..)。

为什么？

Answer 1

如this S.O. post中所述：

OnPush就是这样定义的。

触发变更检测


收到组件侦听的DOM事件时

当|异步管道收到新事件时

通过更改检测更新@Input（）时。

使用ChangeDetectorRef :: markForCheck
显式注册要检查的组件下一次更改检测时
ChangeDetectionStrategy.Default触发每次更改检测   在Angulars区域内调用的异步回调（每个DOM甚至可以监听   在Angular应用程序中，每个Observable事件或已完成   Promise，setTimeout，...）

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

Angular 4 - html输入元素更改事件使用OnPush策略触发@Input（）setter

1 个答案: