改变Angular中的检测周期 - 澄清？

Question

关于ChangeDetectorRef，我已经知道 -

detectChanges实际上触发了变化检测，而使用 - markForCheck - 组件的实际变化检测未被调度，但是将来会发生（作为当前或下一个CD周期的一部分）

Taken from here

看看markForCheck - 如果没有安排，那么什么时候会运行？显然是在Observables回调，异步回调和setTimout和事件之后。

The docs有OnPush战略的组成部分

@Component({
  selector: 'cmp',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `Number of ticks: {{numberOfTicks}}`
})
class Cmp {
  numberOfTicks = 0;

  constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks++;
      // the following is required, otherwise the view will not be updated
      this.ref.markForCheck();
    }, 1000);
  }
}

题：

如果它标记为检查其祖先，在下一个周期，那么谁运行当前周期？ （它是上一个setTimeout调用吗？）

因为这段代码显示每秒被另一个代替 - 换句话说每秒都有一个变化检测（？！）。

通过POV步骤实际发生了什么？

Answer 1

正如您所猜测的那样，markForCheck，正如其名称所示，将告诉Angular标记要在下一个周期变化检测的组件。

当您编写setInterval时，这就是您实际编写的内容：

constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks++;
      // the following is required, otherwise the view will not be updated
      this.ref.markForCheck();

      detectChangesFromZoneJS(); // this is a psudo code, but you can imagine something like this will happen, which is patched by NGZone
     // Note that this is the last function that will always be called by Zone at the end of all the async events

    }, 1000);
}

这由ZoneJS处理。

区域猴子修补了所有异步事件，当它们完成时，Zone会通知Angular，然后是Angular。知道是时候检测更改（根据最新的模型更改更新视图），但是当你是组件时，OnPush不会检测到更改，除非组件内部发生特殊事情，（如点击事件） ，或任何@input的更改）。

因此当你故意说markForCheck时，你基本上会说：“我知道你不应该检测到这些变化，因为它只是OnPush，但我告诉你无论如何都要检测到它”

所以这是一步一步：

1. 组件已初始化，Angular将检测所有更改，您的视图已更新
2. 你在其中运行一个setInterval，你正在改变你的模型，Angular知道它不应该更新视图，因为它是OnPush
3. 第一个区间的回调被调用，我们在第一个函数内部，你正在标记要被故意检查的组件，我们在区间函数的末尾（仍然是第一个区间）。
4. 区域通知的Anguar刚刚完成Async事件，是检测更改的时间
5. Angular看看OnPush并想忽略它，但是记得你已经标记了要强制检查的组件
6. 视图得到更新
7. 我们去第二个区间，依此类推。