使用Navigate与ParamMap在组件间通过路由传递多个参数的问题

你现有代码的问题出在两处：

1. 路由配置中多个路径参数未用斜杠分隔
2. 路由路径前缀和跳转时指定的路径不匹配

1. 修改路由配置 #

你现有配置的bug/:bug:project写法不符合Angular路由参数规范，且路径前缀和跳转的bug-update不匹配，调整为：

{path : 'bug-update/:bug/:project', component: BugComponent}

说明：多个路径参数必须用/分隔，占位符前加:标识，路径前缀要和router.navigate中指定的首段路径完全一致

2. 跳转逻辑无需修改 #

你写的跳转代码本身符合参数传递顺序要求，第一个参数bugName会匹配路由中的:bug占位符，第二个参数this.projectName匹配:project占位符：

public editBug(bugName:string){
    this.router.navigate(['bug-update', bugName, this.projectName])
}

3. 参数接收逻辑优化建议 #

现有快照方式获取参数仅在组件首次初始化时生效，如果组件会被路由复用（比如同组件切换不同参数），建议改成订阅方式获取参数：

ngOnInit() {
  this.activeRouter.paramMap.subscribe(params => {
    const bugName = params.get('bug');
    const projectName = params.get('project');
    if(bugName != null && projectName != null){
      this.bugName = bugName;
      this.projectName = projectName
    }
  })
}

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