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

Question

继此对角的变化检测好文章，我想调试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;
  }
}