我的Angular变更检测断点未在checkAndUpdateView()上触发 [英] My breakpoint in Angular's change detection is not triggered on checkAndUpdateView()

问题描述

在

我想念什么?我尝试使用最新的Chrome和Firefox.

解决方案

该文章来自2018年，从那时起，Angular引入了Ivy编译器，该编译器彻底改革了Angular的内部结构.如果您使用的是Angular 9或更高版本，则不会出现此断点.我测试了Angular 7、8和9应用程序.版本7&8达到了断点，而Angular 9应用却没有.

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

debug-change-detection.component.ts:

 从'@ angular/core'导入{Component，NgZone};@零件({选择器:"app-debug-change-detection"，模板:< p class ="数字"> {{check()}}区域检查</p>'，样式:[`:主持人 {位置:绝对；左:10px；底部:0;显示:块；}.数字 {显示:块；}`]})导出类DebugChangeDetectionComponent {计数= 0;构造函数(私有区:NgZone){}查看() {this.zone.runOutsideAngular(()=> {setTimeout(()=> this.count = this.count +1);});返回this.count;}} 

Following this good article on angular's change detection, I wanted to debug the checkAndUpdateView function. However, it is never triggered.

What am I missing? I tried with the latest Chrome and Firefox.

解决方案

That article is old, from 2018, and since then Angular has introduced the Ivy compiler, which completely overhauled the internals of Angular. If you are using Angular 9 or later this breakpoint won't be hit. I tested an Angular 7, 8 and 9 app. Versions 7 & 8 hit the breakpoint, and the Angular 9 app didn't.

I would suggest using this component to debug change detection. Add it to your app and it will count change detection cycles.

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()上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！