Используйте трубу `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"

Answer 2

Да, если вы используете асинхронный канал в нескольких местах, он будет вызывать запрос столько раз.

Чтобы исправить это, попробуйте выполнить одно из следующих действий:

1) Подписаться на него в компонентеи используйте свойство с нулевой проверкой

2) Используйте ng-container

cheers (y)