首页 文章

订阅Angular 2中的route params和queryParams

提问于
浏览 次
20

我已经设置了以下 routing system

export const MyRoutes: Routes = [
    {path: '', redirectTo: 'new', pathMatch: 'full'},
    {path: ':type', component: MyComponent}
];

并有以下 navigation system

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

有时他们有 optional queryParams（页面）

现在我需要阅读 route params and 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文档，他们没有任何示例或代码同时实现 both route params and queryParams 的订阅 .

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

angular rxjs

4 回答

  • 8

    使用 ActivatedRoute 中的ActivatedRouteSnapshot

    ActivatedRouteSnapshot 接口具有 params 和 queryParams 属性，您可以同时获取这两个值 .

    constructor(private route: ActivatedRoute) {
    console.log(this.route.snapshot.params);
    console.log(this.route.snapshot.queryParams);
}

    编辑：正如OP所述，我们只用这种技术得到参数的初始值 .

    示例Plunker

    回复于
  • 40

    我通过在订阅之前使用 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']);
});
    回复于
  • 9

    对于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', component: MyComponent},

    回复于
  • 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;
   });

    关于取消订阅：是的，它是真正的路由参数，queryParams或导航事件订阅被路由器自动取消订阅，但有一个例外：如果您的路线有孩子，当在孩子之间导航时，不会发生取消订阅 . 只有当你离开父路线时！

    例如 . 我有一个标签作为子路线的情况 . 在第一个选项卡组件的构造函数中订阅路径参数以检索数据 . 每次我从第一个选项卡导航到第二个选项卡，然后再添加另一个订阅，从而导致请求数量相乘 .

    回复于

相关问题