Angular 2路由器评估多个路由参数

时间:2016-09-29 18:22:01

标签: angular angular2-routing angular2-router3

在我的应用程序中,我有多个参数的路由,例如

http://localhost:3000/department/6/employee/45/sales?from=20160921&to=20160928

如何最好地评估这些参数?我可以订阅params的{​​{1}}和queryParams

ActivatedRoute

然而,这当然会触发两次加载。此外,我始终需要这两条信息,例如上例中的this.route.params.subscribe(params => ...load data for params); this.route.queryParams.subscribe(queryParams=> ...load data for queryParams); sales / from

所以上面的代码变成了

to

我仍然无法解决两次触发负载的问题。

更糟糕的是,我还需要弄清楚我需要在this.route.params.subscribe(params => { let queryParams = this.route.snapshot.queryParams; ...load data for params/queryParams } this.route.queryParams.subscribe(queryParams => { let params = this.route.snapshot.params; ...load data for params/queryParams } 中提升多少级别,所以看起来并不常见

ActivatedRoute

唉。无论如何,这会导致延迟加载组件。无论如何,只需要检索一些路由参数就可以获得很多样板代码。

我这样做错了吗?有没有推荐的方法来解决这个问题?

1 个答案:

答案 0 :(得分:1)

您可以尝试以下,

paramSubscription = Observable.forkJoin(
  this.route.params,
  this.route.queryParams,
  this.route.parent.parent.parent.params
).subscribe(res => {
   this.combinedParams = { params :res[0], queryParams :res[1], ancestorParam : res[2] };
   // Load data
 });

// unsubscribe from the subscription
ngOnDestroy = () => {
    this.paramSubscription.unsubscribe();
}

请注意我尚未测试此代码。

希望这会有所帮助!!