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

Posted 2023-02-19

【中文标题】我在 Angular 变更检测中的断点未在 checkAndUpdateView() 上触发

【英文标题】：My breakpoint in Angular's change detection is not triggered on checkAndUpdateView()

【发布时间】：2021-01-17 07:32:09

【问题描述】：

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

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

【问题讨论】：

你能提供更多的上下文和共享代码吗？哪个组件、如何配置、它的代码、您如何尝试触发检测等。

【参考方案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;
  

【讨论】：

哦，我明白了。我已经拥有了所有这些，我只是想手动调试它以了解幕后发生的事情。那么自从Ivy之后就没有办法在Browser中调试了吗？

我认为没有一个断点可以帮助您了解幕后发生的事情。这很复杂……

好吧，直到常春藤出现。 checkAndUpdateView 是我正在寻找的。为什么断点不再停止它？我怀疑他们改变了整个变更检测机制。

我刚刚搜索了“常春藤更改检测断点”并找到了这个：同一作者：indepth.dev/…

我也发现了 :) 我以为您对此了解得更多。我会接受你的回答，“版本 7 和 8 达到断点，而 Angular 9 应用程序没有。”帮助过我。谢谢