Стратегия Angular LoadingService выдает ошибку изменения выражения

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

У меня есть ЗагрузкаСервис, который содержит ПоведениеТема из логический. Мне нравится отображать экран загрузки вместо роутер-розетка при выполнении вызовов 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>

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

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();
  }

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

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

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

ViqMontana 22.05.2019 13:18

Попробуйте что-то подобное над вашим конструктором в AppComponent: loading$ = this.loader.loading$

Stefan 22.05.2019 13:40
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
110
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

the expression has changed after it was checked

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

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

Так это потому, что я что-то меняю в родительском элементе, но в вашем решении вы меняете значение «родного брата», если можно так сказать.

Ingó Vals 22.05.2019 20:20

С братьями и сестрами обычно все в порядке, обычно, когда вы меняете асинхронное значение для родителя (я полагаю, используемого html), это вызывает проблему.

ViqMontana 22.05.2019 20:31

Другие вопросы по теме