在 angular 5 中更新路由参数

Question

我有一条这样的路线 dashboard/tour/2/269，这个组件代表旅游详情，在那个组件里面有一些链接指向类似的旅游，所以当用户点击其中一个链接时我想重新加载基于新参数的组件就像这样说 dashboard/tour/5/150，我尝试使用直接 [routerLink] 但它把新参数附加到旧参数上变成这样 dashboard/tour/2/269/tour/5/150 路由变成无效。

请提出任何建议。

Answer 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。所以如果我有一个路由器 link 给下一个人说 [routerLink]="['/persons', 2]"，这段代码会更新并为我提供 2.

的 id

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

StackBlitz 解决方案

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

在 angular 5 中更新路由参数

Update routeparams in angular 5

angular

angular5

routeparams

angular-router-params