如何订阅子路由参数并将结果用于 运行 另一项服务？

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 的数据对于在 left-sidebar.

上选择的项目，它将包含 action-items 的数组

最后一部分是我遇到的问题，因为我没有看到对参数的订阅工作；我试过使用：

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;
     });
}