Есть ли возможность сделать компонент полностью изолированным, чтобы он не вызывал обнаружение изменений

Question

У меня есть часы на странице, и они обновляются каждую секунду, используя setInterval(), потому что проверяются все привязки приложения.Есть ли опция в угловом, чтобы поместить компонент в какой-то пузырь, чтобы часы на странице обновлялись каждую секунду и не вызывали обнаружение изменений в других компонентах?

Я знаю, что есть NgZone класс с его runOutsideAngular() методом, но насколько я знаю, он только изолирует код внутри * .ts файлов, а не шаблонов.

Пример кода:

clock.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-clock',
  templateUrl: './clock.component.html',
  styleUrls: ['./clock.component.css']
})
export class ClockComponent implements OnInit {

  public currentLocalTime: Date;

  constructor() {
    setInterval(() => {
      this.currentLocalTime = new Date();
    }, 1000);
  }

  ngOnInit() {
  }
}

clock.component.html

<p>
  currentLocalTime 
</p>

app.component.html

<app-clock></app-clock>
.
.
.
.
<app-another></app-another>

Answer 1

Вы можете использовать OnPush стратегию обнаружения изменений, которая означает, что изменение детекторов срабатывает только при изменении свойства @Input.Вы можете изменить стратегии следующим образом:

@Component({
  ........
  changeDetection: ChangeDetectionStrategy.OnPush
})

Если вы хотите вручную активировать детектор изменений, вы можете ввести ChangeDetectorRef:

constructor(private cdr: ChangeDetectorRef){}

someMethod = () => {
    // do some changes
    this.cdr.detectChanges();
}

---

Ссылки:

https://angular.io/api/core/ChangeDetectionStrategy

https://angular.io/api/core/ChangeDetectorRef

https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4

Answer 2

Вы можете отсоединить ChangeDetector внутри вашего компонента и инициировать обнаружение изменений вручную. Это дает вам полный контроль над чеками. В вашей ситуации этот подход будет более эффективным, чем изменение ChangeDetectionStrategy на push.

constructor(private cdRef: ChangeDetectorRef) {
    this.cdRef.detach();
    setInterval(() => {
      this.currentLocalTime = new Date();
      this.cdRef.detectChanges();
    }, 1000);

}

Answer 3

Почему вы не пользуетесь timer observable.Смотрите демо ЗДЕСЬ .Это должно решить вашу проблему.

Просто создайте таймер, наблюдаемый как

time: number;
obsTimer:Observable<number> = timer(1000,1000);

и подпишитесь на него в ngOnInit

this.obsTimer.subscribe(time => this.time = time);
//here you can add milliseconds to your datetime object

Как вы видите в stackblitzсниппет.console.log метод не вызывается на ngOnChanges ловушке жизненного цикла