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

Question

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

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

Answer 1

那篇文章是 2018 年的旧文章，从那时起 Angular 引入了 Ivy 编译器，它彻底检查了 Angular 的内部结构。如果您使用的是 Angular 9 或更高版本，则不会命中此断点。我测试了一个 Angular 7、8 和 9 应用程序。版本 7 和 8 达到断点，而 Angular 9 应用程序没有。

我建议使用此组件来调试更改检测。将其添加到您的应用中，它将计算更改检测周期。

debug-change-detection.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;
  }
}