angular - 避免 RxJs 6 中的嵌套 subscribe() 调用

Question

有时我需要先前可观察到的值并运行另一个依赖于该值的函数，依此类推。它进行嵌套的 subcribe() 调用，然后代码非常丑陋且难以管理。我这里有一个例子:

getObservableData().subcribe(next=>
    let dialogRef=this.dialog.open(EvalListComponent, {data: next})
    dialogRef.afterClosed().subscribe(next=>{
        let k=dialogRef.componentInstance.getAnotherObservableData()
            .subcribe( next=> doSomthing(next))
}))

什么样的解决方案才能出现这样的情况。我需要一些扁平结构。我知道有一个管道函数，可以与 rxjs 运算符一起使用。但如何才能实现呢？

Answer 1

推荐这篇文章:learn flattening strategies .

TLDR:使用映射运算符，例如:mergeMap、switchMap、concatMap、exhaustMap。

All of them mostly work in the same manner —

1. They map some value to an observable (you are the one in charge of returning an observable value from them, they just map it)

2. They flatten the observable you return ( they just subscribe to it)

3. They decide about what to do before / after they flatten (“Flattening Strategy”)

您唯一需要决定的是哪种策略对您的示例有用。通过阅读这篇文章，您可以轻松弄清楚。