Question

我在Angular 2文档中看到了以下示例

@Component({
  selector: 'cmp',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `Number of ticks: {{numberOfTicks}}`
})
class Cmp {
  numberOfTicks = 0;
  constructor(ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks ++
     // the following is required, otherwise the view will not be updated
     this.ref.markForCheck();
    }, 1000);
  }
}

如上所述，当changeDetection属于ChangeDetectionStrategy.OnPush时，视图只有在＆＃34; this.ref.markForCheck（）;＆＃34;时才会更新。被调用。

任何人都可以在这里解释markForCheck（）方法的重要性。

Answer 1

使用ChangeDetectionStrategy.OnPush Angular运行更改检测，在更新@Input()时，收到Angular侦听的DOM事件，或者异步管道（| async）收到新值。< / p>

例如，如果您订阅服务中的observable并更新组件的状态，则不会更新对此状态的绑定，因为上面的列表不包含此内容。如果你打电话给this.ref.markForCheck()，你告诉Angular它应该运行变更检测，因为实际上有更改需要更新（这也是异步管道所做的）。

其他情况是，如果您明确地（this.zone.runOutsideAngular()）或由于某些其他原因，代码在Angulars区域外运行会修改组件的状态，这也不会被覆盖（即使代码是事件处理程序）。

Answer 2

使用ChangeDetectionStrategy.OnPush告诉Angular不要对组件执行更改检测（即更新其视图），除非一个或多个组件的输入已更改（这些输入应该是不可变对象）。

对于来自组件本身并要求更新视图的任何事件，您必须明确告知更改检测器在其下一次更改检测运行时查找该组件中的更改。

在此代码段中，ref是对更改检测器的引用。调用ref.markForCheck()告诉变更检测器发生了一些会改变视图的事情（即numberOfTicks已经增加）并且需要重新计算它。

Answer 3

这不是我的内容。但是，我认为，与上述问题相关的最佳解释提供在以下链接中：

Understanding Change Detection Strategy in Angular

了解角度变化检测2

3 个答案: