Angular2 路由器 - 使用不同的参数导航到当前页面答案

【问题标题】：Angular2 router - Navigate to the current page with different parametersAngular2 路由器 - 使用不同的参数导航到当前页面
【发布时间】：2021-08-14 05:46:36
【问题描述】：

我正在尝试使用不同的参数路由到当前页面但无济于事。我有一个触发组合框：

this.router.navigate(['page', selectedId]);

网址正在改变，但仅此而已。

如何使用不同的参数路由到同一页面？

【问题讨论】：

你还想要什么？ URL 更改是路由的预期行为...
试试navigate(['../', selectedId], { relativeTo: route })，其中route是ActivatedRoute
谢谢@peeskillet，不幸的是这没有用。我得到了同样的行为，网址正在改变，但页面没有刷新。
网址是否设置为您期望的网址？您是否检查过控制台是否有任何错误？如果它们没有任何错误，可能需要一个 plunker 来测试它
Pardeep 的回答是：But it only change your URL if you really want to load some methods then you have to call them manually 导致了我几分钟前遇到同样问题时使用的解决方法。我的解决方法是创建到同一组件的镜像路由。如果实际路由匹配（this.router.url.match('/firstroute/')）与第一个镜像路由，我重定向到第二个镜像路由（this.router.navigate('/secondroute', params)），否则我重定向到第一个。是的，我知道，这是解决这个问题的一种非常丑陋的方式......它有效，但它是一种丑陋的方式:)

标签： angular angular2-routing

【解决方案1】：

页面不会刷新，因为这就是Router 的工作原理……无需刷新页面！

你必须订阅路由参数来检测它们的变化，然后用这些信息做任何你想做的事情..

所以将ActivatedRoute 注入到您的组件中并订阅如下参数：

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
     // PARAMS CHANGED .. TO SOMETHING REALLY COOL HERE ..

     // for example extract the id..
     let id = +params['id']; // (+) converts string 'id' to a number

   });
}

【讨论】：

这很奇怪，当路由到同一页面时，组件树静止不动，开发人员需要手动模拟所有事件？这真的很复杂！
您指的是哪些事件？通常你只需要重新加载你的模型并继续..
我在这个功能模块中有几个组件。 id 作为@input 冒泡给他们，他们会采取相应的行动。现在我需要触发所有 oninit 事件。
您可以更改该输入的类型。您可以使用 number 而不是 Observable 并检测这些组件中的更改。
我不确定 observables 但我所做的是挂钩 onChanges 而不是 onInit。 onChanges 在数据绑定中的每次更改时触发。

【解决方案2】：

好的，在阅读了你所有的答案后，特别是 @mxii 的（谢谢你），我明白了：

当路由到具有不同参数的同一页面时，仅参数更改。 DOM 静止不动，没有组件重建，没有 onInit 循环。
OnChanges 挂钩会在每次数据绑定更改时触发，这意味着如果我将参数传递给子组件，我不能在此参数上使用 OnInit，我必须使用 OnChanges 挂钩。

很好的课程，谢谢！

【讨论】：

【解决方案3】：

你可以用这个来做到这一点

this.router.navigateByUrl('page_url/' + your_id);

通过这样做，您的参数将成功更改。

但它只会更改您的网址。如果你真的想加载一些方法，那么你必须手动调用它们。

【讨论】：

【解决方案4】：

我找到的最简单的方法，订阅路由器然后重新加载页面：

this.router.navigate(['page', selectedId]).then(page => { window.location.reload(); });

【讨论】：