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的实例。

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

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

StackBlitz解决方案

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

以角度5更新routeparams

1 个答案: