Стратегия Angular LoadingService, выбрасывающая выражение с измененной ошибкой

Question

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

У меня есть LoadingService , который содержит BehaviourSubject из Boolean . Мне нравится отображать экран загрузки вместо router-outlet при выполнении вызовов API и настройке представления. Поэтому я просто хотел установить поведение после этого, которое переключается с экрана загрузки на розетку маршрутизатора.

Вот услуга:

export class LoadingService {
  private emitLoading: BehaviorSubject<boolean>;

  constructor() {
    this.emitLoading = new BehaviorSubject<boolean>(true);
  }

  get loading$(): Observable<boolean> {
    return this.emitLoading.asObservable();
  }

  public setLoading(newValue: boolean): void {
    this.emitLoading.next(newValue);
  }
}

И мой загруженный компонент приложения

<div class="container">
    <h1>My App</h1>
    <div *ngIf="loading$ | async">
      <h1>...Loading<h1>
    <div>
    <div [hidden]="loading$ | async">
        <router-outlet></router-outlet>
    </div>
</div>

Где loading $ предоставляется из этой службы загрузки через компонент приложения

export class AppComponent  {

  constructor(
    private loader: LoadingService
  ) { }

  get loading$(): Observable<boolean> {
    return this.loader.loading$;
  }
}

И я направляюсь прямо к компоненту, который устанавливает загрузку в false. Я попробовал несколько разных стратегий здесь. ngOnInit(), ngAfterViewInit(), делает ChangeDetectorRed.detectChanges(), но ничего не работает.

ngAfterViewChecked() {
    this.loader.setLoading(false);
    this.cdRef.detectChanges();
  }

Полагаю, я не понимаю сложности здесь или неправильно использую тему. Кто-нибудь, кто может прямо сказать, что это плохая стратегия, или есть способ заставить ее работать?

Вот блик стека.

Answer 1

Как объясняется в моем комментарии, причина того, что вы получаете эту ошибку, заключается в том, что ваш app.component.ts загружен переменной loading$, но когда angular отображает дочерние компоненты, loading$ изменяется, поэтому:

выражение изменилось после его проверки

Я бы порекомендовал всегда показывать router-outlet, но вместо этого отображать оверлей загрузки при маршрутизации.

Я обновил ваш StackBlitz , который теперь отображает это наложение при нажатии кнопки Отправить. Это должно помочь в том, чего вы пытаетесь достичь.