ApplicationRef

Примеры использования isStable и предостережения

Обратите внимание на два важных момента, касающихся isStable, которые показаны в примерах ниже:

• приложение никогда не станет стабильным, если при его запуске начать какую-либо повторяющуюся асинхронную задачу (например, процесс опроса с помощью setInterval, setTimeout или операторов RxJS, таких как interval);
• Observable isStable выполняется вне зоны Angular.

Представим, что вы запускаете повторяющуюся задачу (здесь счётчик увеличивается с помощью RxJS interval) и одновременно подписываетесь на isStable.

constructor(appRef: ApplicationRef) {
  appRef.isStable.pipe(
     filter(stable => stable)
  ).subscribe(() => console.log('App is stable now');
  interval(1000).subscribe(counter => console.log(counter));
}

В этом примере isStable никогда не выдаст true, и сообщение «Приложение теперь стабильно» никогда не будет записано в журнал.

Если нужно выполнить действие, когда приложение станет стабильным, перед запуском процесса опроса необходимо дождаться стабилизации приложения.

constructor(appRef: ApplicationRef) {
  appRef.isStable.pipe(
    first(stable => stable),
    tap(stable => console.log('App is stable now')),
    switchMap(() => interval(1000))
  ).subscribe(counter => console.log(counter));
}

В этом примере сообщение «Приложение теперь стабильно» будет записано в журнал, после чего счётчик начнёт увеличиваться каждую секунду.

Также обратите внимание, что этот Observable выполняется вне зоны Angular, поэтому код в подписке на него не запускает обнаружение изменений.

Представим, что вместо записи значения счётчика в журнал вы обновляете поле компонента и отображаете его в шаблоне.

constructor(appRef: ApplicationRef) {
  appRef.isStable.pipe(
    first(stable => stable),
    switchMap(() => interval(1000))
  ).subscribe(counter => this.value = counter);
}

Поскольку Observable isStable выполняется вне зоны, поле value обновится правильно, но шаблон не будет обновлён!

Чтобы обновить шаблон, необходимо вручную запустить обнаружение изменений.

constructor(appRef: ApplicationRef, cd: ChangeDetectorRef) {
  appRef.isStable.pipe(
    first(stable => stable),
    switchMap(() => interval(1000))
  ).subscribe(counter => {
    this.value = counter;
    cd.detectChanges();
  });
}

Или выполните функцию обратного вызова подписки внутри зоны.

constructor(appRef: ApplicationRef, zone: NgZone) {
  appRef.isStable.pipe(
    first(stable => stable),
    switchMap(() => interval(1000))
  ).subscribe(counter => zone.run(() => this.value = counter));
}