时间戳

首页 > 解决方案 > 以角度 5 更新 routeparams

angular - 以角度 5 更新 routeparams

问题描述

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

请有任何建议。

标签： angularangular5routeparamsangular-router-params

解决方案

你将不得不注入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]"

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

您将需要获取在您的 Dashboard 组件的路由中列出的每个参数。在这个例子中，我的路由很简单persons/:id，我可以id从http://localhost:3000/persons/1. 因此，如果我有一个指向下一个人的路由器链接[routerLink]="['/persons', 2]"，那么这段代码将更新并为我id提供2.

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

StackBlitz 解决方案

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

推荐阅读