使用 BehaviorSubject 和异步未显示微调器答案

【问题标题】：Spinner Not Showing using BehaviorSubject and async使用 BehaviorSubject 和异步未显示微调器
【发布时间】：2017-05-16 21:07:52
【问题描述】：

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

@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()实际上并没有触发它被显示；知道为什么吗？我在AppModule 的providers 数组中声明了SpinnerService。

这是微调器组件：

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

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

【问题讨论】：

你的app-spinner 组件是什么样的？
从未使用async 管道和任何类型的Subject 或ngIf 条件我会怀疑这个概念是否有效。您是否尝试过订阅基本布尔属性以至少确认该部分概念？您的核心目的可能是作为“加载”微调器吗？
是的，这个概念只是一个加载器。好的，我将尝试使用布尔值连接到基本订阅/取消订阅，然后查看。
它应该可以工作。请创建一个 plunker
我未能为此创建一个 plunker :( 我确实将其更改为普通订阅，但它确实有效。我还注意到，当它是普通订阅时，我在 Chrome 检查器中看到了这一点：  但是当我使用异步管道时，false 变为 null

标签： angular spinner behaviorsubject

【解决方案1】：

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

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

这是解决方案的笨蛋。

http://plnkr.co/edit/bYG9IEsIow24zfvxQOKT

【讨论】：