我设置了以下路由系统
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看起来像这样
http://localhost:3000/new
http://localhost:3000/new?page=2
http://localhost:3000/updated
http://localhost:3000/updated?page=5
有时他们有可选的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留档，他们没有任何示例或代码，其中同时实现对路由参数和queryParams的订阅。
有什么方法能正确地做到这一点吗？有什么建议吗？
我设法通过在订阅之前使用可观察.组合最新组合可观察对象来获得对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']);
});
对于Angular 6
import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
...
combineLatest(this.route.params, this.route.queryParams)
.pipe(map(results => ({params: results[0].xxx, query: results[1]})))
.subscribe(results => {
console.log(results);
});
xxx来自您的路由
{path：'post/： xxx'，组件：MyComponent}，
注意Angular 12（即RxJs版本7），使用：
import { combineLatest, map } from 'rxjs';
并将数组传递给组合最新函数：
combineLatest([this.route.params, this.route.queryParams])
.pipe(map(results => ({params: results[0].xxx, query: results[1]})))
// ...
迟到的回答，但另一个解决方案：我不是订阅params和queryparams，而是订阅路由器上的NavigationEnd事件。只触发一次，params和queryparams都可以在快照中使用：（角4的示例）
this.router.events.filter(event=>event instanceof NavigationEnd)
.subscribe(event=>{
let yourparameter = this.activatedroute.snapshot.params.yourparameter;
let yourqueryparameter = this.activatedroute.snapshot.queryParams.yourqueryparameter;
});
关于取消订阅：是的，路由参数、查询参数或导航事件订阅是由路由器自动取消订阅的，但是有一个例外：如果您的路由有孩子，当在孩子之间导航时，不会发生取消订阅。只有当你远离父路由时！
例如，我有一个选项卡作为子路由的情况。在第一个选项卡组件的构造函数中，订阅路由参数以检索数据。每次我从第一个选项卡导航到第二个选项卡并返回时，都会添加另一个订阅，从而增加请求的数量。
