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上，我试图订阅route参数，以便在值更改时，我还可以运行其他服务来获取特定: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;
     });
}

如何订阅子路由参数并使用结果运行其他服务？

1 个答案: