切换至paramMap后Angular路由示例无法正常显示结果？

嘿，我一眼就看到你代码里的一个小语法错误，这大概率是导致路由出口不显示正确结果的根源！

你写的params.get['name']是错的——paramMap的get是方法，不是属性，得用圆括号调用，正确写法应该是：

ngOnInit() {
  this.route.paramMap.subscribe(params => this.name = params.get('name'));
}

既然你已经开启了路由追踪，咱们可以按下面的步骤一步步排查：

• 盯紧路由追踪日志：打开浏览器控制台，看路由切换时的日志输出，确认name参数有没有被正确传递到目标路由。如果日志里压根看不到name参数，那问题出在跳转环节——不管是导航链接还是router.navigate调用，得检查参数传递是否正确。
• 打印paramMap实锤内容：在订阅回调里加一行console.log(params)，看看拿到的paramMap里到底有没有name这个键值对。如果没有，就得去路由模块里检查配置，确保路径里有:name这样的参数占位符，比如：

  { path: 'hello/:name', component: HelloComponent }
  

• 确认组件模板绑定：去hello.component.html里看看，是不是正确写了{{ name }}？有没有拼写错误，比如写成了{{ Name }}或者{{ username }}？
• 用快照快速验证：如果觉得订阅逻辑可能有问题，可以先用paramMap的快照来快速测试参数是否能获取到：

  ngOnInit() {
    this.name = this.route.snapshot.paramMap.get('name');
    console.log('拿到的name参数:', this.name);
  }
  

  这样能先排除订阅逻辑的干扰，确认参数本身能不能拿到手。
• 检查路由出口状态：最后再确认下<router-outlet>的位置，有没有被其他元素（比如用了*ngIf的容器）意外隐藏或者覆盖了？

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