Angular路由中全局可用的URL参数

Question

我正在尝试构建一个类似于谷歌地图的地图中心应用程序。因此，主要是地图，并且根据URL路由，组件会加载到小侧面板内。

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

我希望实现的功能类似于Google Maps：

/home/@54.072,-2.899 —> 加载 HomeComponent 并导航到坐标 54.072，-2.899

/dashboard/@53.123,2.345 —> 加载 DashboardComponent 并导航到坐标 54.123，2.345

但是，:coordinates 参数不应该局限于组件内部，而应该在某种程度上是全局的。否则，我必须在每个组件内部完成导航部分。

换句话说：如果我执行以下操作：

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

在 AppComponent 内部，参数未定义。它只在每个特定组件内起作用。

在 Angular5 中是否有实现这一功能的方法？

- netik

---

你能否在这里发布通过查询参数完成的解决方案？如果用户平移地图，您是如何从组件更新参数的？ - Tisha

Answer 1

也许 路由解析器(Route Resolver) 对你有用。它通常被用于在导航到一个路由之前从服务器获取数据，但你也可以把导航逻辑放在其中。

1. Create a service NavigationResolver for your navigation logic
2. The service implements the Resolve interface.

3. Within the resolve method, you extract the params and start the navigation logic

   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
     let coordinates = route.paramMap.get('coordinates');
   
     // This is where your navigation happens
     return this.navigateTo(coordinates)
   }
   

4. You add the NavigationResolver to all routes that should handle the params:

   {
     path: 'home/:coordinates',
     component: HomeComponent,
     resolve: {
       navigationResult: NavigationResolver
     }
   },
   

5. If necessary, you can access the resolved navigation data from within your components via

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

在官方文档中，了解更多关于 路由解析器 的内容，请访问此处。

- Kim Kern

---

这看起来非常有前途！谢谢，我会尽快试一下！ - netik

它确实完美地工作了！我忘记提到的一件事是，每当用户更改地图的可见范围/中心点时，例如在AppComponent中通过地图通知的这些事件中，我还需要更新URL中的坐标。由于我无法从那里找出当前路由（主页、仪表板等），所以我可能还需要记住它，并且也要在NavigationResolver服务内完成整个Angular导航，对吗？ - netik

现在我想想，也许使用查询参数而不是路由参数更有意义。它们可以从任何组件全局访问。请看这里：https://angular.io/guide/router#query-parameters - Kim Kern

如果用户更改地图的中心点，您如何更改URL参数？ - Tisha

你可以使用路由器直接导航到新的URL。 - Kim Kern

我有一些困惑 - 导航应该在路由解析器还是主组件中完成。 - Tisha

Answer 2

替代方案：使用查询参数

在路由参数示例中，您只处理了特定于路由的参数，但是如果您想要对所有路由可用的可选参数怎么办？这就是查询参数发挥作用的地方。

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

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

- Kim Kern