Angular 12 如何从URL链接中获取矩阵参数id、name的值

问题原因 #

• 代码存在语法错误：subscribe的回调函数缺少闭合大括号，同时subscribe方法本身缺少闭合括号，会直接触发编译或运行报错。
• 你的链接参数属于Angular的矩阵路由参数（路由段后用分号分隔的参数），如果路由配置中没有将id、name声明为路径占位参数，旧的paramsAPI可能无法正常读取参数，官方更推荐使用paramMap进行参数读取，类型安全更高，兼容性也更好。

修正方案 #

方案1：订阅参数（适配参数动态变化场景） #

如果业务中存在同一路由下参数动态更新的需求，使用订阅方式监听参数变化：

ngOnInit(): void {
    this.route.paramMap.subscribe(paramMap => {
        this.questionnaireName = paramMap.get('name');
        this.questionnaireID = paramMap.get('id');
    });
}

方案2：快照读取（适配参数固定场景） #

如果参数仅在路由进入时赋值一次，不需要监听后续变化，可以直接用路由快照一次性读取，性能更优：

ngOnInit(): void {
    this.questionnaireName = this.route.snapshot.paramMap.get('name');
    this.questionnaireID = this.route.snapshot.paramMap.get('id');
}

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