Question

我已经尝试阅读有关此内容以及很多建议来解决此问题，但我很走运。我想我的整体策略有些糟糕，尽管我没有意识到。

我有一个 LoadingService ，其中包含布尔值的 BehaviourSubject 。在执行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>

通过应用组件从该加载服务中显示 loading $ 的地方

export class AppComponent  {

  constructor(
    private loader: LoadingService
  ) { }

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

然后我直接路由到将load设置为false的组件。我在这里尝试了几种不同的策略。 ngOnInit()，ngAfterViewInit()进行ChangeDetectorRed.detectChanges()，但无济于事。

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

我想我不了解这里的复杂性，或者我使用的主题不正确。谁能直截了当地说这是一个坏策略，或者有办法使它奏效？

Here is a stackblitz.

Answer 1

正如我的评论中所述，收到此错误的原因是因为app.component.ts加载了变量loading$，但是当angular渲染子组件时，loading$发生了变化，因此：

检查后表达式已更改

我建议始终显示router-outlet，但在导航时显示负荷叠加层。

我已经更新了您的StackBlitz，当您按“提交”时，现在会显示此覆盖图。这应该有助于您实现目标。

Angular LoadingService策略引发表达式更改错误

1 个答案: