获取组件中的路由参数

Question

我正在研究 Angular-6 项目。我的应用程序有很多子路由。其中之一如下：

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

我想从我的ScrumBoardComponent 中的URL获取创新轨道 ID值。

我知道我可以通过执行以下操作来做到这一点：

 constructor(private _route: ActivatedRoute) { }

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

但是，我想在任何组件中获取创新轨道 ID值，无论它是子组件还是父组件都没有关系。我的意思是我不想做以下事情：

this._route.snapshot.parent.paramMap

相反，我想做以下事情：

 this._route.params.<any parameter name>

Answer 1

创建一个服务（我们称之为服务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))
}

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