如何正确处理角度路由订阅，然后将参数用于并行 http 请求

Question

我尝试为以下场景找到合适的解决方案：

我从订阅路由参数中得到了一个 Observable。现在，如果此订阅触发它应该启动两个并行的 http 请求。

我尝试将 switchMap 与 forkJoin 结合使用。可悲的是，这没有奏效。以下代码有效，但我认为我不应该在订阅中使用订阅？那么正确的解决方案是什么？

this.subscriptions.add(this.route.params.subscribe( params => {
   this.subscriptions.add(forkJoin(
     [this.componentService.getComponentDetails( params.id ), this.planService.getPlanTypes()]
   ).subscribe(
     (data) => {
       console.log(data);
     },
     (error) => {
       console.error('Error loading Form: ', error);
     }
   ));
}));

订阅对象随后用于取消订阅 (ngOnDestroy)。

Answer 1

嵌套订阅是一种反模式。您可以使用 switchMap 运算符重构代码以返回单个订阅。

const sub = this.route.paramMap
  .pipe(switchMap(paramMap => {
    const id = paramMap.get('id');
    return forkJoin([
      this.componentService.getComponentDetails(id), 
      this.planService.getPlanTypes()
    ])
  })).subscribe(data => console.log(data))

this.subscriptions.add(sub)

另外，请注意我是如何使用 paramMap 而不是 params。这是在最新版本的 Angular 中访问参数的首选方式。