Question

我有以下服务来容纳我的应用中的全局微调器：

@Injectable()
export class SpinnerService {
  private visible = new BehaviorSubject < boolean > (true);

  showSpinner() {
    this.visible.next(true);
  }

  hideSpinner() {
    this.visible.next(false);
  }

  getSpinnerVisibility(): Observable < boolean > {
    return this.visible.asObservable();
  }
}

然后在我的主应用程序组件中的router-outlet上方：

<app-spinner *ngIf="spinnerService.getSpinnerVisibility() | async"></app-spinner>

但spinnerService.showSpinner()实际上并未触发它显示;任何想法为什么？我已在SpinnerService的{{1}}数组中声明providers。

这是微调器组件：

AppModule

绝对没有别的了！当我删除上面的<div class="backdrop"><div class="spinner"></div></div>语句时，顺便显示它，这意味着CSS没有任何问题。

Answer 1

我已经提出了类似于你的例子的东西（但我不确定你的微调器组件是什么样的）并且我没有使用|异步管道，但我只是将行为主题作为Observable返回（我认为在这种情况下也足够安全，只使用类型）

isLoading(): Observable<boolean> {
return this._loadingState;
}

这是解决方案的吸收者。

http://plnkr.co/edit/bYG9IEsIow24zfvxQOKT

Spinner不显示使用BehaviorSubject和async

1 个答案: