Как подписаться на параметры дочернего маршрута и использовать результат для запуска другого сервиса?

Question

Я пытаюсь, чтобы следующий сценарий работал; У меня есть экран, давайте называть это AdminComponent, который имеет две боковые панели и router-outlet который отображает выбранный пункт маршрута.

<div class="console container">
    <div class="sidebar-left"></div>
    <div class="sidebar-right"></div>
    <div class="outlet-container">
        <router-outlet></router-outlet>
    </div>
</div>

Идея, которую я пытаюсь реализовать, заключается в следующем:

На left-sidebar Я рендерил несколько ссылок, которые меняют маршрут на /admin/:id; Я использую простую get сервис для извлечения данных, которые мне нужны для каждого элемента для отображения ссылок.

На right-sidebar Я пытаюсь подписаться на параметры маршрута, чтобы при изменении значения я также мог запустить другой сервис для извлечения данных для конкретного :id который будет содержать массив action-items для элемента, выбранного на left-sidebar,

Последняя часть - это то, с чем у меня проблемы, так как я не вижу работающей подписки на параметры; Я пытался с помощью:

this.route.firstChild.paramMap.subscribe()

Но это выдает ошибку, когда я нахожусь на родительском маршруте admin/, это работает только если я перейду прямо к admin/1 например. Мне нужно подписаться на изменение маршрута, чтобы я мог отобразить элементы на правой боковой панели, но я не знаю, как к этому подойти.

Надеюсь, это достаточно ясно, любые другие детали, которые могут помочь, я могу предоставить их.

Answer 1

То, что вы хотите сделать, это прослушать любую навигацию и затем получить queryParams примерно так

import { Router, ActivatedRoute } from '@angular/router';

// ... 

constructor( 
  public activatedRoute: ActivatedRoute, 
  public router: Router
) {}

// ...

ngOnInit() {
   this.listenForRouteChange();
}

listenForRouteChange() {
   this.router.events
     .pipe(filter(x => x instanceof NavigationEnd))
     .subscribe(result => {
       // you could do two things here, if you know that you are only ever going
       // to have the single param you can do this
       let url = result.urlAfterRedirects.split('/');
       let params = url[url.length - 1]; 

       // or if you want to be more precise call this function
       this.getRouteParams();
     });
}

getRouteParams() {
   this.activatedRoute.queryParams
     .subscribe(result => {
       let id = result.id;
     });
}