Angular路由传参：如何向目标组件传递除:id外的额外参数

你遇到的问题是因为路由参数的传递方式不符合Angular路由的规则，下面我会给你两种常用的解决方案，你可以根据实际需求选择：

方案1：使用路径参数（URL路径中包含参数） #

这种方式适合把参数作为资源标识的一部分，需要先修改路由配置，把额外参数加入路径结构中：

1. 更新路由配置 #

修改你的路由定义，把type也作为路径参数添加进去：

const routes: Routes = [
  { path: '', component: EmailTemplateComponent, data: { title: 'Email Template' } },
  // 新增:type参数到路径中，与:id保持顺序一致
  { path: ':id/:type/email-template-details', component: EmailTemplateDetailsComponent,
    children: [
      { path: '', redirectTo: 'email-template', pathMatch: 'full'},
      { path: '', component: EmailTemplateDetailsComponent, data: {title: 'Email Template Details'}}
    ] 
  },
];

2. 源页面跳转时传递参数 #

调整navigate的参数顺序，严格按照路由路径的参数顺序传入id和type：

addEmailTemplate(){
  this.router.navigate(['email-template', 'new', 'newType', 'email-template-details']);
}

3. 目标页面获取参数 #

使用Angular推荐的paramMap（响应式，支持参数动态变化）或者旧版的params来获取所有路径参数：

// 推荐：响应式获取参数，支持参数变化时自动更新
this.route.paramMap.subscribe((paramMap) => {
  this.emailId = paramMap.get('id');
  this.type = paramMap.get('type');
  console.log('id:', this.emailId, 'type:', this.type); // 输出 id: new type: newType
});

// 兼容写法：使用forEach（不推荐，Angular已逐渐弃用params）
this.route.params.forEach((urlParameters) => {
  this.emailId = urlParameters['id'];
  this.type = urlParameters['type'];
});

方案2：使用查询参数（URL后拼接?key=value） #

如果你的参数不是资源的核心标识，只是额外的配置/筛选类参数，推荐用查询参数——这种方式不需要修改路由配置，参数会以?key=value的形式拼接在URL末尾：

1. 源页面跳转时传递查询参数 #

在navigate的第二个参数中传入queryParams对象，存放你的额外参数：

addEmailTemplate(){
  this.router.navigate(
    ['email-template', 'new', 'email-template-details'],
    { queryParams: { type: 'newType' } }
  );
}
// 最终URL会是：/email-template/new/email-template-details?type=newType

2. 目标页面获取参数 #

分别从paramMap获取路径参数id，从queryParamMap获取查询参数type：

// 响应式方式，支持参数动态变化
this.route.paramMap.subscribe((paramMap) => {
  this.emailId = paramMap.get('id');
});

this.route.queryParamMap.subscribe((queryParamMap) => {
  this.type = queryParamMap.get('type');
  console.log('type:', this.type); // 输出 type: newType
});

// 快照方式：适合参数不会动态变化的场景，代码更简洁
this.emailId = this.route.snapshot.paramMap.get('id');
this.type = this.route.snapshot.queryParamMap.get('type');

为什么你之前的写法无效？ #

你之前尝试的写法：

this.router.navigate([ 'email-template', {id:'new',type:'newType'}, 'email-template-details' ]);

这其实是在传递矩阵参数（Matrix Parameters），参数会被格式化为/email-template;id=new;type=newType/email-template-details。这种参数属于email-template这个路由段，而你的目标页面是子路由组件email-template-details，所以需要通过父路由来获取这些参数：

// 获取父路由的矩阵参数
this.route.parent?.paramMap.subscribe((paramMap) => {
  this.emailId = paramMap.get('id');
  this.type = paramMap.get('type');
});

不过矩阵参数通常用于同一路由段的多参数传递，不是最常用的场景，所以更推荐前面两种方案。

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