angular - 在同一可观察对象上多次使用 `async` 管道

Question

我正在使用 NGXS 更新加载状态并且状态正在正确更新，但我面临一个问题

如何在模板中多处使用加载状态？

NGXS 选择器如下所示:

@Select(MyAppState.isLoadingLayouts) loading$: Observable<boolean>;

现在在我的模板中有一个需要禁用的按钮，加载程序应在调度操作时显示在按钮中。我尝试如下，但没有用。按钮没有被禁用。

<button mat-raised-button class="gec-button" (click)="getLayoutsData()" [disabled]="loading">
  <ng-container *ngIf="loading$ | async as loading; else submit">
   <app-progress-bar [diameter]="16"></app-progress-bar>
  </ng-container>
  <ng-template #submit>Submit</ng-template>
</button>

我认为我们不能使用loading$ | async 在模板中多次触发多个异步调用。

有没有办法实现这个单一的异步管道？

Answer 1

当然。你只需要 share订阅者之间可见:

public getSharedLoading$() {
  return this.loadging$.pipe(share());
}

*ngIf="getSharedLoading$ | async as loading; else submit"