angular - 在Angular 2中同时订阅路由参数和queryParams

我已经设置了以下路由系统

export const MyRoutes: Routes = [
  {path: '', redirectTo: 'new', pathMatch: 'full'},
  {path: ':type', component: MyComponent}
];

并具有以下导航系统

goToPage('new');
goToPageNo('new', 2);

goToPage(type) {
  this.router.navigate([type]);
}
goToPageNo(type, pageNo) {
  this.router.navigate([type], {queryParams: {page: pageNo}});
}

示例 URL 看起来像这样

有时他们有可选 queryParams(页面)
现在，我需要同时阅读路由参数和queryParams

ngOnInit(): void {
  this.paramsSubscription = this.route.params.subscribe((param: any) => {
    this.type = param['type'];
    this.querySubscription = this.route.queryParams.subscribe((queryParam: any) => {
      this.page = queryParam['page'];
      if (this.page)
        this.goToPageNo(this.type, this.page);
      else
        this.goToPage(this.type);
    })
  })
}

ngOnDestroy(): void {
  this.paramsSubscription.unsubscribe();
  this.querySubscription.unsubscribe();
}

现在，这不能按预期方式工作，访问没有queryParams的页面可以正常工作，然后我访问带有queryParams的页面“goToPageNo”被多次调用，因为我在路由参数内订阅了queryParams。
我查看了Angular 2文档，他们没有任何示例或代码，其中同时实现了对routet参数和queryParams 的的预订。
有什么办法可以正确地做到这一点吗？有什么建议？

最佳答案

我在订阅之前通过使用Observable.combineLatest组合了可观察对象，从而设法获得了对queryParams和Params的单一订阅。

例如。

var obsComb = Observable.combineLatest(this.route.params, this.route.queryParams,
  (params, qparams) => ({ params, qparams }));

obsComb.subscribe( ap => {
  console.log(ap.params['type']);
  console.log(ap.qparams['page']);
});