在 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，但我只想在每次 url 更改时调用一次服务，避免任何不需要的调用.

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 时，两个 observable 都会触发，我无法控制哪个会触发第一的.另一方面，当从 /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屋！