Angular中routerLink生成URL用分号代替问号，运行异常如何解决？

问题原因 #

你当前将参数直接写在routerLink路径数组中的写法，生成的是Angular的矩阵参数，所以参数前会用分号分隔，而非你需要的?开头的标准查询参数。

解决方法 #

修改按钮的routerLink属性配置，将查询参数通过单独的queryParams输入属性传递：

<button [routerLink]="['/answerslist']" [queryParams]="{id: applicant.id}" label="View Interview"></button>

如果你是在TypeScript代码中调用路由跳转，对应写法如下：

import { Router } from '@angular/router';

constructor(private router: Router) {}

jumpToList(applicant) {
  this.router.navigate(['/answerslist'], {
    queryParams: { id: applicant.id }
  });
}

修改完成后，生成的URL就会符合http://localhost:4200/answerslist?id=member2的格式，你原本用于订阅queryParams的参数获取代码无需调整，就能正常读取到id值。

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