在同一个可观察对象上多次使用 `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

是的，如果你在多个地方使用异步管道，它会触发很多次请求。

要解决此问题，请尝试以下任一方法：

1) 在组件中订阅它并使用带空检查的属性

2) 使用ng-container

干杯（y）

Answer 2

当然可以。您只需要在订阅者之间 share observable：

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

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

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

Use `async` pipe multiple times on same observable

observable

angular

ngxs