Angular 7：如何重写嵌套订阅？答案

【问题标题】：Angular 7: How to re-write nested subscribtions?Angular 7：如何重写嵌套订阅？
【发布时间】：2019-12-24 23:50:19
【问题描述】：

我有一个显示过滤的项目列表的组件。它订阅了两个可观察对象 - 第一个用于（过滤）参数，需要将这些参数传递给第二个可观察对象以获取过滤后的项目列表。

public filteredItems = [];

this.myService.getFilterParams()
   .subscribe(params => {
       this.myService.getFilteredItems(params)
         .subscribe(items => { this.filteredItems = items});
   });

我已经读到链接订阅不是最佳实践（否则代码可以正常工作），那么我该如何重写它？

【问题讨论】：

这取决于myService.getFilteredItems 是否进行http 调用？你用的是哪个版本的 rxjs？
是的，它调用 myService.getItems（它只是对其应用过滤器参数），它会进行 http 调用。我正在使用 rxjs 版本 6.5.2。非常感谢您愿意提供帮助！

标签： angular rxjs observable angular7

【解决方案1】：

您可以在此处使用 switchMap、mergeMap、concatMap 高阶运算符。

如果您的第一个 observable 将发出多个值，并且您希望从 subscribe 函数中的所有内部 observable 收集响应，请使用 mergeMap。并且它会并行发送请求，并且在订阅响应时不会保持顺序。
您还可以使用 concatMap 发送第一个请求收集响应，然后发送第二个请求以获取您的内部 observable。

查看您的代码，我建议使用 switchMap，这将取消从您的第一个可观察对象发出的任何新值，并且在您的订阅中只收到最后一个内部可观察值。

如果需要，还可以点按响应以执行任何中间步骤。

希望这会有所帮助。

this.myService
    .getFilterParams()
    .pipe(
         tap( (res) => {
           // do any intermediate steps 
           console.log(res);
         }),
         switchMap(params => this.myService.getFilteredItems(params))
     )
     .subscribe(items => {
         this.filteredItems = items;
     });

【讨论】：

非常感谢您这么详细的回答！我是 Angular 的新手，非常感谢您的回答给了我这样（罕见的）洞察力时刻。我没有勾选你的答案只是因为 Evaldas 比较早而且他的回复也有效。
好极了，即使有一点帮助，也很乐意提供帮助。

【解决方案2】：

您可以使用mergeMap 或switchMap 来实现此目的。区别在于switchMap 会在外部订阅发出新值时取消内部订阅，mergeMap 不会。

this.myService
    .getFilterParams()
    .pipe(mergeMap(params => this.myService.getFilteredItems(params)))
    .subscribe(items => {
        this.filteredItems = items;
    });

【讨论】：