Я пробовал читать об этом и много предложений, чтобы исправить это, но мне не повезло. Я предполагаю, что вся моя стратегия просто в чем-то плоха, хотя я не понимаю, чем именно.
У меня есть ЗагрузкаСервис, который содержит ПоведениеТема из логический. Мне нравится отображать экран загрузки вместо роутер-розетка при выполнении вызовов 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();
}
Я думаю, я не понимаю сложности здесь, или я неправильно использую Тему. Любой, кто может прямо сказать, что это плохая стратегия или есть способ заставить ее работать?
Попробуйте что-то подобное над вашим конструктором в AppComponent: loading$ = this.loader.loading$
Как объясняется в моем комментарии, причина, по которой вы получаете эту ошибку, заключается в том, что ваш app.component.ts
загружается с переменной loading$
, но когда angular отображает дочерние компоненты, loading$
изменяется, поэтому:
the expression has changed after it was checked
Я бы порекомендовал всегда показывать router-outlet
, но вместо этого отображать наложение загрузки при навигации по маршруту.
Я обновил ваш StackBlitz, который теперь отображает это наложение, когда вы нажимаете кнопку «Отправить». Это должно помочь в том, чего вы пытаетесь достичь.
Так это потому, что я что-то меняю в родительском элементе, но в вашем решении вы меняете значение «родного брата», если можно так сказать.
С братьями и сестрами обычно все в порядке, обычно, когда вы меняете асинхронное значение для родителя (я полагаю, используемого html), это вызывает проблему.
По сути, вы получаете эту ошибку, потому что ваш app.component.ts загружается с переменной
loading$
, но когда angular рендерит дочерние компоненты,loading$
изменяется.