Angular中router.navigateByUrl传值失败问题求助

嘿，我一眼就发现你卡在哪了！问题出在Component1里的路由跳转写法上，咱们一步步来搞定：

问题根源 #

你在Component1里写的跳转代码是：

this.router.navigateByUrl('probarborrar/', event.value)

但navigateByUrl的第二个参数是路由配置选项（NavigationExtras），不是用来传递路由参数的！你传的event.value根本没被当作idUser参数拼到路径里，所以Component2自然拿不到任何值。

正确的跳转方式 #

你需要把参数直接整合到路由路径里，这里有两种靠谱的写法：

方式1：修正navigateByUrl的用法 #

用模板字符串把参数拼进完整路径：

// Component1的跳转代码改成这样
this.router.navigateByUrl(`probarborrar/${event.value}`);

方式2：使用navigate方法（更推荐） #

navigate支持数组格式的路由路径，Angular会自动匹配路由配置里的参数，不容易写错：

// Component1里替换成这个写法
this.router.navigate(['probarborrar', event.value]);

验证Component2的代码 #

你的Component2代码其实没问题，只要跳转路径正确，this.route.snapshot.paramMap.get('idUser')就能拿到值。如果你的组件可能被复用（比如从同一路由跳转回来），还可以订阅paramMap的变化来确保实时获取参数：

ngOnInit() {
  // 订阅参数变化，适合组件复用的场景
  this.route.paramMap.subscribe(params => {
    this.dni = params.get('idUser');
    console.log('en probando es :', this.dni);
  });
}

改完之后再测试，Component2里的dni就能正常显示你传递的event.value值啦！

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