获取组件中的路线参数

时间:2018-08-21 07:30:01

标签: angular typescript angular-routing angular-router

我正在从事Angular-6项目。我的申请有很多子路线。其中之一如下:

  const routes: Routes = [
  {
    path: 'innovation-track/:innovation-track-id', component: InnovationTrackComponent,
    children: [
      {
        path: 'sprint', component: ScrumBoardComponent
      }
    ]
  }
];

我想从我的 ScrumBoardComponent 中的URL获取 innovation-track-id 值。

我知道我可以通过以下操作来实现:

 constructor(private _route: ActivatedRoute) { }

 //somewhere in method     
   this._route.snapshot.parent.paramMap

但是,我想在任何组件中获取 innovation-track-id 值,无论是孩子还是父母都没有关系。我的意思是我不想执行以下操作:

this._route.snapshot.parent.paramMap

相反,我想做以下事情:

 this._route.params.<any parameter name>

2 个答案:

答案 0 :(得分:4)

创建服务(我们将其称为RouteParamsService):

export class RouteParamsService {
  innovationTrackId = new BehaviorSubject(undefined);
}

在您的父组件中,订阅params:

constructor(private route: ActivatedRoute, private service: RouteParamsService) {
  route.params
    .subscribe(params => service.innovationTrackId
      .next(params && params['innovation-track-id'] || undefined))
}

现在您可以在任何组件中订阅服务,您将获得参数的价值。父组件将处理任何值更改,并且服务会将更改传播到预订该值的任何组件。

答案 1 :(得分:0)

使用Activated Route。作为params数组的索引,您可以使用任何参数名称。

constructor(private itunes:SearchService,
    private route: ActivatedRoute) {

    this.route.params.subscribe( params => params[<any parameter name>]); 
}