Question

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

public filteredItems = [];

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

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

Answer 1

您可以使用mergeMap或switchMap来实现。不同之处在于，如果外部订阅发出新值，switchMap将取消内部订阅，而mergeMap不会取消。

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

Answer 2

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

如果您的第一个可观察对象将发出多个值，并且您希望从订阅函数中的所有内部可观察对象收集响应，请使用mergeMap。此外，它将并行发送请求，并且在订阅中获得响应时将不维护顺序。
您还可以使用concatMap，它将发送第一个请求并收集响应，然后发送第二个请求以供内部观察。

查看您的代码，我建议使用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;
     });

角度7：如何重新编写嵌套订阅？

2 个答案: