Стратегия 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
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Обработка ошибок при выполнении HTTP-запросов в JavaScript.
Обработка ошибок при выполнении HTTP-запросов в JavaScript.
Каждый проект должен выполнять HTTP-запросы, и, конечно, некоторые из этих запросов могут содержать ошибки. Нам нужно знать, как обрабатывать эти...
Включение UTF-8 в jsPDF с помощью Angular
Включение UTF-8 в jsPDF с помощью Angular
Привет, разработчики, я предполагаю, что вы уже знаете, как экспортировать pdf через jsPDF. Если ответ отрицательный, то вы можете ознакомиться с моей...
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

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