Angular路由：使用createUrlTree修改Team ID时保留User ID的方法

你遇到的问题是因为原来的路由写法只指定了新的Team路径，没有显式带上User ID部分，所以导致User参数丢失。这里有几种简单的解决方法：

方法一：获取当前User ID，显式构造完整路由路径 #

首先从当前路由快照中取出User ID，然后在创建新URL树时把User部分也加上，这样就能保留User参数了：

// 从当前路由获取User ID参数
const userId = this.route.snapshot.paramMap.get('user');
// 构造包含新Team ID和原有User ID的URL树
const newUrlTree = this.router.createUrlTree(
  ['../../team/22', 'user', userId], 
  { relativeTo: this.route }
);
// 导航到新路由
this.router.navigateByUrl(newUrlTree);

原理很简单：当前路由是team/11/user/22，../../会回到根目录，之后我们拼接team/22和user/[userId]，最终就得到了team/22/user/22。

方法二：基于父路由修改Team ID #

如果你的路由结构是team/:teamId下嵌套user/:userId（这是常见的结构），可以利用当前路由的父级来简化写法：

const userId = this.route.snapshot.paramMap.get('user');
// 相对于父路由（team/11），切换到team/22并保留user子路由
const newUrlTree = this.router.createUrlTree(
  ['../22', 'user', userId], 
  { relativeTo: this.route.parent }
);
this.router.navigateByUrl(newUrlTree);

这里../22是相对于父路由team/11，直接替换为team/22，再加上user/[userId]，同样能得到目标路由。

方法三：直接用navigate方法简化代码 #

如果你不需要单独创建UrlTree对象，也可以直接用router.navigate方法，写法更简洁：

const userId = this.route.snapshot.paramMap.get('user');
this.router.navigate(
  ['../../team/22', 'user', userId], 
  { relativeTo: this.route }
);

注意事项 #

• 如果你的Team ID不是硬编码的22，可以换成变量（比如newTeamId），写法完全一致。
• 确保路由参数的名称和你路由配置中的一致（比如如果参数名是userId而不是user，要对应修改paramMap.get('userId')）。

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