Angular lifecycle hook уходит в бесконечный цикл?

Question

В life cycle hook написал проверку, но по достижению переменной timer числа 10, хук уходит в бесконечный цикл вызовов в консоль числа 10, почему и как исправить?

ngDoCheck(): any {
    if (this.layoutService.timer == 10) {
      this.resetFilteringPanel();
      console.log(this.layoutService.timer)
    }
}

layoutService.ts:

      timer = 0;
    startTimer(): any {
    interval(1000).pipe(
    ).subscribe({
      next: count => {
        this.timer++;
      },
    });
  }

Answer 1

Обычно ngDoCheck используется для каких-то манипуляции с ChangeDetectorRef компонента (detectChanges, attach и тд). Это связано с тем, что хук триггерится в начале нового цикла проверки биндингов. Вы методом this.resetFilteringPanel наверняка меняете внутренние проперти, что триггерит очередной DoCheck и так по кругу.

Вероятно, в вашем случае правильнее будет просто подписаться на таймер layoutService в ngOnInit и в подписке проверять и манипулировать стейтом компонента.

// layout.service.ts
timer$ = interval(1000).pipe(share());

// ...component.ts
ngOnInit() {
    this.layoutService.timer$
        .pipe(filter(n => n > 0 && n % 10 === 0))
        .subscribe(tick => this.resetFilteringPanel());
    ...
}

БЛОГ НА HUSL

Angular lifecycle hook уходит в бесконечный цикл?

Ответы (1 шт):