Angular LoadingService策略抛出表达式变化的误差

Question

我已经尝试阅读此信息，并有很多建议来解决此问题，但我很幸运。我想我的整个策略只是某种程度上不好，尽管我没有意识到如何。

i具有 boolean 的 caveniorSubject 的 loadingService 。我喜欢在执行API调用并设置视图时显示加载屏幕，而不是 Router-Outlet 。因此，我只想设置完成行为，然后将其从加载屏幕切换到路由器出口。

这是服务：

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

我想我不了解这里的复杂性，或者我正在使用错误。任何可以直接说出这是一个不好的策略的人，或者有一种使它起作用的方法？

这是一个stackblitz。

Answer 1

正如我的评论中所述，您收到此错误的原因是因为您的app.component.ts加载了变量loading$，但是当Angular呈现儿童组件时，loading$会更改，因此：

表达式被检查后已更改

我建议的是始终显示router-outlet，但是，在路由导航时显示加载覆盖层。

我已经更新了您的stackblitz，该stackblitz现在在您按提交时会显示此覆盖层。这应该有助于您尝试实现的目标。