Angular 2路由器评估多个路由参数
问题描述:
在我的应用中,我有多个参数的路由,例如Angular 2路由器评估多个路由参数
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(...)
唉。无论如何,这可以解释为懒惰的加载组件。无论如何,它只是为了检索一些路由参数而使用了很多样板代码。
我做错了吗?有没有推荐的方法来解决这个问题?
答
你可以试试下面,
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();
}
请注意我没有测试此代码呢。
希望这有助于!