0

我有以下服务来适应我的应用程序中的全局微调器：

@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在providers我的AppModule.

这是微调器组件：

<div class="backdrop"><div class="spinner"></div></div>

绝对没有别的！当我删除*ngIf上面的语句时，顺便说一句，它显示正确，这意味着 CSS 没有任何问题。

4

1 回答 1

0

我已经提出了一些可能类似于您的示例的内容（但我不确定您的微调器组件的外观如何）并且我没有使用 | 异步管道，但我只是将 Behavior 主题返回为 Observable （我认为在这种情况下，仅使用类型也足够安全）

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

这是解决方案的笨蛋。

http://plnkr.co/edit/bYG9IEsIow24zfvxQOKT

于 2017-05-16T13:07:52.457 回答