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

請注意我沒有測試此代碼呢。

希望這有助於！