Angular - Как предотвратить вложенные трубопроводы с зависимыми наблюдаемыми? - PullRequest
Новая
       6

Angular - Как предотвратить вложенные трубопроводы с зависимыми наблюдаемыми?

4 голосов
/ 19 февраля 2020

Чтобы сохранить мой код в чистоте, я стараюсь не использовать вложенные каналы, когда дело доходит до наблюдаемых. Однако я столкнулся с созвездием (см. Код ниже), где я не мог найти способ обойтись без. Интересно, есть ли способ решить эту проблему только с одним каналом?

Пример кода: 

class CannotSimplify {

  observableA(): Observable<number> {
    return of(1);
  }

  bDependentA(a: number): Observable<number> {
    return of(2 + a, 3 + a);
  }

  cDependentOnAAndB(a: number, b: number): Observable<number> {
    return of(a + b);
  }

  printResult(): void {
    this.observableA()
      .pipe(
        switchMap(a => this.bDependentA(a)),
        switchMap(b => this.cDependentOnAAndB(a, b)) // <-- error: a is undefined
      )
      .subscribe(c => console.log(c));
  }

}

Единственное решение, которое я могу придумать, это снова передать this.bDependentOnA(). Есть ли лучший подход?

Заранее спасибо!

Ответы [ 2 ]

2 голосов
/ 19 февраля 2020

Я думаю, вы можете использовать для этого оператор zip. 

this.observableA()
   .pipe(
     switchMap(a => zip(of(a), this.bDependentA(a))),
     switchMap(([a, b]) => this.cDependentOnAAndB(a, b))
   )

Начиная с Rx Js версии 7, оператор zip будет быть заменен на zipWith. Подробнее об этом здесь . 

this.observableA()
   .pipe(
     switchMap(a => this.bDependentA(a).pipe(zipWith(of(a)))),
     switchMap(([b, a]) => this.cDependentOnAAndB(a, b))
   )
0 голосов
/ 19 февраля 2020

Я думаю, что вы хотите вызвать три функции в одном канале. Это мое решение - использовать zip . 

import { Observable, of, Subscription, zip } from 'rxjs';


    printResult(): void {
        this.observableA()
        .pipe(
           switchMap(a => zip(of(a), this.bDependentA(a))),
           switchMap(([a, b]) => this.cDependentOnAAndB(a, b))
        ).subscribe(c => console.log(c));
    }

Мой пример: https://stackblitz.com/edit/angular-4ipoen

...