如何避免Angular中具有相同Observable源的多个异步管道？答案

【问题标题】：How to avoid multiple async pipes with the same Observable source in Angular?如何避免Angular中具有相同Observable源的多个异步管道？
【发布时间】：2018-09-19 22:41:55
【问题描述】：

我的组件有一个名为state$ 的Observable：当我需要访问state$.favorites 时，如何避免重复自己，如下例所示？

@Component({
  selector: 'app-example',
  template: `
    <ng-container *ngIf="(state$ | async).favorites.length">
      {{ (state$ | async).favorites.length }}
    </ng-container>
  `,
})
export class ExampleComponent() {
  @Select(state => state.app) state$: Observable<AppState>;
}

有没有办法将它分配给模板变量？

【问题讨论】：

标签： angular rxjs

【解决方案1】：

您可以执行以下操作：

 <ng-container *ngIf="(state$ | async) as state">
      {{ state.favorites.length }}
  </ng-container>

您不需要检查 .length。通过做我所做的，您正在检查可观察对象是否已到达并检查值是否不为空。

【讨论】：

当我使用(state$ | async) as state 时，state 变量是否可以在整个模板中使用？能见度如何？