订阅Angular 2中的route params和queryParams

我已经设置了以下路由系统

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

示例网址如下所示

07000

07001

07002

07003

有时他们有可选的queryParams(页面)

现在我需要读取route params和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”被多次调用,因为我订阅了route Params内的queryParams.

我查看了Angular 2文档,它们没有任何示例或代码,其中同时实现了对params和queryParams的订阅.

有什么方法可以做到这一点吗？有什么建议么？

我通过在订阅之前使用Observable.combineLatest组合observable来设法获得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']);
});

原文链接：https://www.f2er.com/angularjs/143762.html

订阅Angular 2中的route params和queryParams

猜你在找的Angularjs相关文章