angular - 我在 Angular 的更改检测中的断点未在 checkAndUpdateView() 上触发

Question

关注 this关于 Angular 变化检测的好文章，我想调试 checkAndUpdateView 函数。但是，它永远不会被触发。

我错过了什么？我尝试使用最新的 Chrome 和 Firefox。

Answer 1

那篇文章是旧的，从 2018 年开始，从那时起 Angular 引入了 Ivy 编译器，它彻底改革了 Angular 的内部结构。如果您使用的是 Angular 9 或更高版本，则不会命中此断点。我测试了一个 Angular 7、8 和 9 应用程序。版本 7 和 8 达到了断点，而 Angular 9 应用程序没有。
我建议使用此组件来调试更改检测。将它添加到您的应用程序，它将计算变更检测周期。
调试更改检测.component.ts:

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-debug-change-detection',
  template: '<p class="number">{{check()}} zone checks</p>',
  styles: [`
        :host {
          position: absolute;
          left: 10px;
          bottom: 0;
          display: block;
        }
        .number {
          display: block;
        }
    `]
})

export class DebugChangeDetectionComponent {

  count = 0;

  constructor(private zone: NgZone) { }

  check() {
    this.zone.runOutsideAngular(() => {
      setTimeout(() => this.count = this.count + 1);
    });
    return this.count;
  }
}