以角度 5 更新 routeparams答案

【问题标题】：Update routeparams in angular 5以角度 5 更新 routeparams
【发布时间】：2018-05-01 12:56:12
【问题描述】：

我有这样的路线dashboard/tour/2/269，这个组件代表旅游细节，并且在那个组件内部有一些链接指向类似的旅游，所以当用户点击其中一个链接时，我想重新加载组件基于新的参数比如让我们说这个dashboard/tour/5/150，我尝试使用直接的[routerLink]，但是它将新的参数附加到旧的参数上，变成这样dashboard/tour/2/269/tour/5/150 路由变得无效。

请有任何建议。

【问题讨论】：

你的dashboard.html中有<router-link></router-link>吗？
是的，这就是我导航到dashboard/tour/2/269 的方式，这些数字是来自仪表板中单击的游览的路由参数，因此它会显示游览详细信息组件，我想重新导航到该组件但使用新的路由参数

标签： angular angular5 routeparams angular-router-params

【解决方案1】：

您将不得不将ActivatedRoute 注入到您的组件中。您的路线必须这样设置：

{ path: 'person/:id/:office_id', component: PersonComponent },

然后订阅参数：

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params
    .subscribe(params => {
      const id = +params['id'];
      const office = +params['office_id'];
      console.log(`Current params are person ID ${id} and office ID ${office}`);
    });
}

您的 routerLink 将是：

[routerLink]="['/persons', 2, 5]"

在这里，我在构造函数中注入了ActivatedRoute 的实例route。

您需要获取您在路由中为仪表板组件列出的每个参数。在这个例子中，我的路由是简单的persons/:id，我将从http://localhost:3000/persons/1 获得id。所以如果我有一个路由器链接到下一个人说[routerLink]="['/persons', 2]"，这个sn-p代码将更新并为我提供2的id。

根据您当前的说明和问题，这听起来像是您正在寻找的解决方案。

StackBlitz 解决方案

https://stackblitz.com/edit/routing-params

【讨论】：

这是我实际做的，但我的问题是，在您从该组件内部进入 http://localhost:3000/persons/1 后，我想将参数更改为 /persons/2，因此 person 的组件将重新加载新的id 2 的参数
您想从组件类中执行导航吗？还有你的路线定义是什么？
在父组件Tours 我有一个详细信息按钮转到[routerLink]= ['/tours/tour_id'] 这是详细信息组件，在那个子组件中我拦截了tour_id 的路由参数作为你上面的sn-p 来检索数据基于该子组件中的该 id，还有其他一组与那个类似的游览，每个游览都有一个详细信息链接，但从子组件的详细信息链接开始，它看起来像这样/tour/tour_id/tour_id，只需添加一个参数到当前的不更新它
我看到了你的问题。我也更新了我的答案。因此，您的路由定义基于您的 URL 是 dashboard/tour/:tour_id1/:tour_id2 和 [routerLink]="['/dashboard/tour', 5, 150]"，因为不同的段是数组中的项目。签出此stackblitz.com/edit/routing-params
非常感谢，所以需要正确设置 routrlink