1

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

请有任何建议。

4

1 回答 1

0

你将不得不注入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,我可以idhttp://localhost:3000/persons/1. 因此,如果我有一个指向下一个人的路由器链接[routerLink]="['/persons', 2]",那么这段代码将更新并为我id提供2.

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

StackBlitz 解决方案

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

于 2018-05-01T13:33:51.337 回答