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

Question

我正在尝试构建一个类似于谷歌地图的以地图为中心的应用程序。所以主要有一个地图，并且根据 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--> 加载DashboardComponent并导航到坐标 54.123,2.345

但是，:coordinates参数不应该是组件的本地参数，而应该是全局的。否则我必须在每个组件内完成导航部分。

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

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

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

Angular5 有什么办法可以实现这一点吗？

Answer 1

也许 aRoute Resolver是您的一个选择。它通常用于在导航到路线之前从服务器获取数据，但您可以将导航逻辑放在那里。

1. NavigationResolver为您的导航逻辑创建服务
2. 该服务实现了Resolve接口。

3. 在该resolve方法中，您提取参数并启动导航逻辑

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

4. 您将添加NavigationResolver到应处理参数的所有路由：

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

5. 如有必要，您可以通过以下方式从组件内访问已解析的导航数据

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

阅读Route Resolvers官方文档了解更多信息。