Создание нескольких асинхронных c каналов с неизвестным номером - PullRequest
Новая
       66

Создание нескольких асинхронных c каналов с неизвестным номером

0 голосов
/ 28 мая 2020

Я использую Angular 5 и загружаю список элементов с помощью селектора с моей библиотекой NGRX. Мой селектор возвращает список элементов, которые я использовал для динамического создания вкладок на странице с помощью конвейера asyn c. Теперь, когда пользователь щелкает вкладку, я хочу активировать другой селектор, чтобы go получать данные из моего хранилища NGRX, которые могут существовать или не существовать, реклама может вызвать запрос API в эффекте и обновиться редуктором. Все это работает нормально.

Моя проблема в том, что у меня есть переменное количество вкладок, которые потенциально могут запускать несколько asyn c запросов, и я хочу привязать ответ на каждый из этих запросов к правой вкладке . Я не знаю, как это сделать? У меня есть следующий код:

this.store $ .select (getTabContent (id)). Pipe (takeUntil (this.onDestroy $), take (1)). Subscribe ((data) => { ...};

, но я бы предпочел использовать конвейер asyn c, и я не уверен, что это лучший способ сделать это с помощью реактивной библиотеки. Как создать переменную asyn c каналы и иметь возможность привязать к указанным c вкладкам в моем случае?

1 Ответ

0 голосов
/ 28 мая 2020

Вам нужно где-то поделиться идентификаторами вкладок, а затем вы можете использовать switchMap иcommonLatest для получения уведомлений обо всех вкладках. 

ids$ = new BehaviorSubject([1, 2, 3]); // initial tabs

ngOnInit() {
  this.tabs$ = ids$.pipe(
    // creates an array of selectors
    switchMap(ids => combineLatest(ids.map(id => this.store.select(getTabContent(id))))),
    takeUntil(this.onDestroy$),
  );
}

addTab() {
  this.ids$.next([...this.ids$.value, 4]);
}

и в шаблоне 

<ng-container *ngIf="tabs$ | async as tabs">
  <tab *ngFor="let tab of tabs">{{ tab | json }}</tab>
</ng-container>
<a (click)="addTab()">Add Tab</a>
...