Angular 11跳转Contracts组件时传递的URL参数为undefined问题咨询

问题原因及修复方案 #

1. 最核心问题：错误使用keyvalue管道导致取值路径错误 #

Angular内置的keyvalue管道会把原始对象/数组转换为{key: 键名, value: 原始值}格式的数组，你在*ngFor中遍历拿到的policy并不是原始的业务对象，而是转换后的键值对结构，直接取policy.Dsc必然返回undefined。
修复方式二选一：

• 如果life本身就是数组类型，直接删除keyvalue管道即可：

  <div class="card" *ngFor="let policy of life | slice:0:1;">
  

• 如果life是对象类型确实需要keyvalue遍历，修改取值路径为policy.value.Dsc：

  <a [routerLink]="['/contracts', policy.value.Dsc]"
    routerLinkActive="active" class="noLinksDecoration">
  

2. 参数读取方式不兼容动态场景 #

使用snapshot.params只适合页面首次进入时取静态参数，如果存在组件复用、路由子嵌套等场景，会出现拿不到最新参数的情况，推荐改为订阅paramMap的方式读取，且必须写在ngOnInit生命周期中（不要写在constructor里）：

// 先导入ParamMap
import { ParamMap } from '@angular/router';

// 在ngOnInit中订阅
ngOnInit() {
  this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
    this.category = params.get('Dsc');
  });
}

3. 其他排查点 #

• 确认GET请求返回的life数据中，字段名确实是大小写完全匹配的Dsc，如果后端返回的是小写dsc或者拼写不一致也会导致取值为空
• 检查路由配置中contracts/:Dsc的规则是否写在通配符路由（比如**）前面，Angular路由是从上到下匹配，前面的规则会优先触发

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