在Angular中组合路线和查询参数 [英] Combine route and query parameters in Angular

问题描述

在Angular中，我必须处理格式为

In Angular I have to process a route in the format

/sections/{id}?filter={filter}

即我有一个路由参数(id)和一个查询参数(filter).这两个参数都是可选的，因此所有这些路由均有效且正在被监听

i.e. I have a route parameter (id), and a query parameter (filter). Both parameters are optional, so all of these routes are valid and being listened to

/sections/{id}?filter={filter}
/sections?filter={filter}
/sections/{id}
/sections

在处理路线时，我需要致电给潜在的昂贵服务，并提供给定的参数.我可以同时订阅路由的params和queryParams，但是我只想在每次更改网址后才调用该服务一次，从而避免了不必要的呼叫.

When handling a route I need to call a potentially expensive service, providing the parameters given. I can subscribe to both the params and queryParams of the route, but I want only to call the service once per url change, avoiding any unneeded calls.

问题在于，当从/sections/1?filter=active移到/sections/2时，两个可观察对象都将触发，而我无法控制首先触发哪个对象.另一方面，当从/sections/1?filter=active移至/sections/1或从/sections/1?filter=active移至/sections/2?filter=active时，只会触发一个.

The problem is that when moving from /sections/1?filter=active to /sections/2 both observables will trigger, and I cannot control which one will trigger first. On the other hand, when moving from /sections/1?filter=active to /sections/1, or from /sections/1?filter=active to /sections/2?filter=active, only one will be triggered.

有什么明智的方法可以知道上一次订阅何时触发，从而避免发送不必要的服务器调用吗?

Is there any sane way to know when the last subscription triggers, so that I can avoid sending unneeded server calls?

到目前为止的测试代码如下:

The test code so far looks something like:

constructor(private activeRoute: ActivatedRoute, private dataService: dataService) {

    this.activeRoute.paramMap.subscribe((params: ParamMap) => {
        console.log("triggering route params subscription");
        this.section = params.get("id");
        this.dataService.runSlowQuery(this.section, this.filter);
    });

    this.activeRoute.queryParamMap.subscribe((queryParams: ParamMap) => {
        console.log("triggering query params subscription");
        this.filter = queryParams.get("filter");
        this.dataService.runSlowQuery(this.section, this.filter);
    });
}

推荐答案

1.订阅路由器事件

您可以订阅路由器events.这将使您可以访问 UrlTree 对象，该对象具有更大的灵活性.

1. Subscribe to router event

You can subscribe to router events. This will give you access to the UrlTree object which allows for more flexibility.

import { Router, UrlTree, NavigationEnd } from '@angular/router';

...

constructor(private router: Router) {}

...

let navigation = this.router.events
   .filter(navigation => navigation instanceof NavigationEnd)
   .map((navigation) => {
     let urlTree = this.router.parseUrl(navigation['url']);
     let queryParams = urlTree.queryParams;
     let segments = urlTree.root.children['primary'] ? urlTree.root.children['primary'].segments : null;
     return { queryParams: queryParams, segments: segments }
   });

navigation.subscribe((navigation) => { ... });

2.利用 combineLatest

let params = this.activeRoute.paramMap;
let queryParams = this.activeRoute.queryParamMap;
let navigation = Observable
   .combineLatest(params, queryParams, (params, queryParams) => ({ params, queryParams }));

navigation.subscribe((navigation) => { ... });

这篇关于在Angular中组合路线和查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！