0

我正在尝试使以下情况起作用；我有一个屏幕，我们称之为它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。我需要订阅路线更改，以便我可以在右侧边栏上呈现项目，但我现在真的不知道如何处理它。

希望它足够清楚，任何其他可能有助于我提供的细节。

4

1 回答 1

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;
     });
}
于 2019-08-13T23:10:09.280 回答