Блог

После этой хорошей статьи об обнаружении изменений angular я хотел отладить функцию checkAndUpdateView. Однако она никогда не срабатывает.

Чего мне не хватает? Я пробовал с последними версиями Chrome и Firefox.

Эта статья старая, с 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;
  }
}