Глобально доступный параметр 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

Альтернативное решение: использовать параметры запроса

В примере параметров маршрута вы имели дело только с параметрами специфичные для маршрута, но что, если вам нужны дополнительные параметры доступно для всех маршрутов? Это где параметры запроса входят в играть.

Вы можете подписаться на queryParamMap из ActivatedRoute (например, в AppComponent) и выполнять логику навигации при изменении параметра:

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

Answer 2

Может быть, Route 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 в официальных документах .