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

Question

在我的应用中，我有多个参数的路由，例如

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

如何最好地评估这些参数？我可以订阅params和ActivatedRoute的queryParams，

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上去，所以这是很平常看到

this.route.parent.parent.parent.params.subscribe(...) 

唉。无论如何，这可以解释为懒惰的加载组件。无论如何，它只是为了检索一些路由参数而使用了很多样板代码。

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

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

请注意我没有测试此代码呢。

希望这有助于！