在 Angular 中组合路由和查询参数

Question

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

的路由

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

即我有一个路由参数（id）和一个查询参数（filter）。这两个参数都是可选的，所以所有这些路由都是有效的并且被监听

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

在处理路由时，我需要调用一个可能很昂贵的服务，并提供给定的参数。我可以同时订阅路由的 params 和 queryParams，但我只想在每次 url 更改时调用一次服务，避免任何不需要的调用。

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

有什么理智的方法可以知道最后一次订阅何时触发，这样我就可以避免发送不需要的服务器调用？

---

目前的测试代码如下所示：

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

Answer 1

1。订阅路由器事件

您可以订阅路由器events。这将使您能够访问UrlTree 对象，从而提供更大的灵活性。

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) => { ... });