Angular中如何在RxJS管道中传递路由参数id至后续操作？

嘿，作为Angular新手遇到这种RxJS管道参数传递的问题太常见了，我来帮你搞定～

你现在的代码里，第二个pipe中的map函数想使用第一个pipe拿到的id，但因为作用域限制，直接写+id会找不到这个变量对吧？核心思路是要把id和服务返回的items一起传递到后续操作中，这里有两种清晰的解决方案：

方案一：将id与服务返回值打包（推荐，纯数据流方式） #

这种方式完全基于RxJS的数据流，不依赖组件状态，更符合响应式编程的理念：

this.route.paramMap
  .pipe(
    // 第一步：把param中的id转为数字，后续不用重复转换
    map(p => +p.get('id')),
    // 第二步：在switchMap里调用服务后，将id和返回的items打包成对象
    switchMap(id => 
      this.MyService.getMyProjectData(id).pipe(
        map(items => ({ id, items }))
      )
    ),
    // 第三步：解构出id和items，传给你的映射函数
    map(({ id, items }) => this.MyListMapper(items, id))
  )

方案二：把id存入组件变量（简单直接） #

如果你觉得打包对象有点麻烦，也可以把id先存到组件的一个属性里，后续直接使用：

// 先在组件里定义一个属性来存储当前id
private currentId: number;

this.route.paramMap
  .pipe(
    map(p => +p.get('id')),
    // 用tap操作符把id存入组件变量
    tap(id => this.currentId = id),
    switchMap(id => this.MyService.getMyProjectData(id)),
    // 直接使用组件里的currentId
    map(items => this.MyListMapper(items, this.currentId))
  )

两种方案对比 #

• 方案一更推荐，因为它是纯数据流的方式，不会引入组件状态，避免了多订阅时的状态同步问题；
• 方案二适合简单场景，代码更直观，但如果组件有多个地方订阅这个流，可能会出现currentId被覆盖的情况，需要注意。

内容的提问来源于stack exchange，提问作者user2837961