Javascript 角度路由器中的全局可用url参数

我正在尝试构建一个类似于谷歌地图的以地图为中心的应用程序。所以主要是一个地图，根据url路径，一个组件被加载到一个小的侧面板中

export const routes: Routes = [
    {path: 'home/:coordinates', component: HomeComponent},
    {path: 'dashboard/:coordinates', component: DashboardComponent},
    {path: 'utils/:coordinates', component: UtilsDemo},
];

我想要实现的与谷歌地图类似：

/home/@54.072，-2.899-->加载

HomeComponent

，并导航到坐标54.072，-2.899

/dashboard/@53.123,2.345-->加载

仪表板组件

，并导航到坐标54.123,2.345

但是，

：coordinates

参数不应该是组件的局部参数，而应该是全局参数。否则，我必须在每个组件中执行导航部分

换句话说，如果我这样做：

this.route.params.subscribe(params => {
   console.log(params['coordinates']);
});

在

AppComponent

中，未定义参数。它只在每个特定组件内部工作

---

在Angular5中有什么方法可以实现这一点吗？

也许您可以选择

路由解析器。它通常用于在导航到路由之前从服务器获取数据，但您可以将导航逻辑放在其中

为您的导航逻辑创建服务
NavigationResolver
该服务实现该接口
在
resolve
方法中，提取参数并启动导航逻辑

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
  let coordinates = route.paramMap.get('coordinates');

  // This is where your navigation happens
  return this.navigateTo(coordinates)
}


如有必要，您可以通过访问组件内解析的导航数据

ngOnInit() {
  this.route.data
    .subscribe((data: { navigationResult: NavigationResult }) => {
      this.navigation = data.navigationResult;
    });
}


在官方网站上阅读有关路由解析程序的更多信息。
替代解决方案：使用

在“管线参数”示例中，仅处理参数
特定于路线，但如果需要可选参数呢
所有路线都有吗？这就是查询参数的作用
玩

您可以订阅
ActivatedRoute
的
queryParamMap
（例如在
AppComponent
中），并在参数更改时执行导航逻辑：

this.route
      .queryParamMap
      .map(params => params.get('coordinates'))
      .subscribe(coordinates => this.navigationService.navigateTo(coordinates))

这看起来很有希望！谢谢，我会尽快试用的！它确实工作得很好！我忘记提到的一件事是，每当用户更改地图的可见范围/中心点时，我还需要更新URL中的坐标，例如在此类事件中地图通知的AppComponent中。因为我无法从那里找到当前路线（主页、仪表板等），所以我可能必须记住它，并从NavigationResolver服务中执行整个角度导航。现在我想了想，也许使用查询参数而不是路线参数更有意义。它们可以从任何组件全局访问。看看这里：如果用户更改了地图的中心点，您是如何更改url参数的？您可以使用路由器导航到新的url，您可以通过查询参数在此处发布解决方案吗？如何从组件更新参数用户是否平移地图？
this.route
      .queryParamMap
      .map(params => params.get('coordinates'))
      .subscribe(coordinates => this.navigationService.navigateTo(coordinates))