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;
  }
}

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

My breakpoint in Angular's change detection is not triggered on checkAndUpdateView()

angular

angular-changedetection