文章/答案/技术大牛

发布

问更新角5中的路由参数
EN

Stack Overflow用户

提问于 2018-05-01 12:56:12

回答 1查看 5K关注 0票数 1

我有一个类似这个dashboard/tour/2/269的路径，这个组件代表旅游细节，在这个组件中有一些链接引用类似的旅游，所以当一个用户单击其中一个链接时，我想要基于新的dashboard/tour/5/150重新加载组件，比如这个dashboard/tour/5/150，我尝试使用一个直接的[routerLink]，但是它将新的参数附加到旧的一个上，使它变得像这个dashboard/tour/2/269/tour/5/150 --路由变得无效。

请给我任何建议。

angular

angular5

routeparams

angular-router-params

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-01 13:33:51

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

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

然后订阅params：

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]"，这个代码片段将更新并提供给我一个id of 2。

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

StackBlitz解决方案

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50116878

复制

相似问题

问更新角5中的路由参数
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更新角5中的路由参数EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更新角5中的路由参数
EN