Question

我正在尝试构建一个类似于Google地图的以地图为中心的应用。因此主要有一个地图，根据网址路径，一个组件被加载到一个小的侧面板中。

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

我想要达到的目标与谷歌地图类似：

/home/@54.072,-2.899 - ＆gt;加载HomeComponent并导航到坐标54.072，-2.899

/dashboard/@53.123,2.345 - ＆GT;加载DashboardComponent并导航到坐标54.123,2.345

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

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

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

在AppComponent内，未定义参数。它只适用于每个特定组件。

有没有办法在Angular5中实现这个目标？

Answer 1

也许cat ips.txt | xargs -rtn1 sh -c 'scp /source-file "${1}:/target-file"' --是您的选择。它通常用于在导航到路径之前从服务器获取数据，但您可以将导航逻辑放在那里。

为您的导航逻辑

Route Resolver

该服务实现Resolve接口。
在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) }添加到应该处理参数的所有路由：
```
NavigationResolver
```

如有必要，您可以通过

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

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

详细了解官方docs中的ngOnInit() { this.route.data .subscribe((data: { navigationResult: NavigationResult }) => { this.navigation = data.navigationResult; }); }。

Answer 2

替代解决方案：使用query params

在路线参数示例中，您只处理参数特定于路线，但如果您需要可选参数，该怎么办？适用于所有路线？这是查询参数的来源播放。

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

AppComponent

角度路由器中全球可用的URL参数

2 个答案: