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

Question

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

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

我想实现的与google地图类似：

/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

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

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

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

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

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

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

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

如有必要，您可以通过

从您的组件中访问已解析的导航数据

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

在官方 docs 中阅读有关 Route Resolvers 的更多信息。

Answer 2

备选方案：使用query params

In the route parameters example, you only dealt with parameters specific to the route, but what if you wanted optional parameters available to all routes? This is where query parameters come into play.

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

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

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

Globally available url param in angular router

javascript

typescript

angular

angular-router