Angular-如何防止带有相关观测值的嵌套管道？

Question

为了保持代码的整洁，我尝试防止在可观察对象方面出现嵌套管道。但是，我遇到了一个星座（请参见下面的代码），在这里我无法找到一种方法。我想知道是否只有一种方法可以解决此问题？

示例代码：

class CannotSimplify {

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

  bDependentA(a: number): Observable<number> {
    return of(2 + 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()。有没有更好的方法？

提前感谢！

Answer 1

我想您想在一个管道中调用三个函数。这是我使用内部管道的解决方案。

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

我的示例：https://stackblitz.com/edit/angular-4ipoen

Answer 2

我认为您可以为此使用zip运算符。

zip

从RxJs版本7开始，zip运算符将替换为

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

。有关zipWith的更多信息。

here