查询参数的更改未被检测到。

Question

我在同步我的过滤器时遇到了问题。我订阅了ActivatedRoute的queryParams，然后获取了query和我的三个过滤条件。

 ngOnInit() {
    this.route
      .queryParams
      .subscribe(queryParams => {
        this._query = queryParams['query'];
        this._heightFilter = queryParams['height'];
        this._colourFilter = queryParams['colour'];
        this._weightFilter = queryParams['weight'];
        // Do some request to WS to get the new data
      });
  }

每当我点击过滤器，比如 colour:blue，我调用我的 reloadPage() 并提供新的 queryparams，然后导航到同一页，只是使用新的 queryparams。

  private reloadPage(): void {
    const queryParams: NavigationExtras = {};
    queryParams['query'] = this._query;
    //Bring filter arrays into shape for queryParams
    this.prepareFiltersForParams(queryParams);
    this.router.navigate([], {
      queryParams,
    });

这一切都很顺利。现在我们选择了colour:blue，但我也想要colour:orange。我将把它添加到queryParams['colour']中，其中包含blue和orange。但由于某种原因，orange甚至存在于queryParams['colour']中，它也没有添加到URL中。如果我现在添加另一个标准的筛选器，比如说height，一切都很好，并且height过滤器将被添加，colour:orange也会被添加。

我觉得问题在于this.route.queryParams.subscribe的change detection无法捕获queryParams['colour']的更改，因此不会更新。

我还在angular#17609上提出了问题。

- tschaka1904

---

你能为此制作一个Plunker吗？在“color”中，你只能有一个值，但是你是如何添加两个值的呢？ - Mr_Perfect

我可以尝试将其放入Plunker中。在GH上，我更深入地描述了这个问题：https://github.com/angular/angular/issues/17609 - tschaka1904

你只能在颜色中有一个值，但是你如何添加两个值呢？ - Mr_Perfect

这基本上是我想要实现的：www.awesome.org/search?query=AppleTree&colour=blue,orange 请参阅 angular#17609。 - tschaka1904

你能提供组件中所有相关代码（每个涉及的方法）甚至模板代码吗？在查看了 GH 问题后，它似乎并不成立。 - Fredrik Lundin

Answer 1

请查看angular文档：https://angular.io/guide/router#activatedroute-the-one-stop-shop-for-route-information。

您可能需要使用switchmap运算符：

由于参数是作为Observable提供的，因此您可以使用switchMap运算符按名称为id参数提供它们，并告诉HeroService获取该id的英雄。switchMap运算符允许您对Observable的当前值执行操作，并将其映射到新的Observable。与许多rxjs运算符一样，switchMap处理Observable以及Promise来检索它们发出的值。如果用户在仍在检索英雄时重新导航到路由，则switchMap运算符也会取消任何正在进行中的请求。

从英雄之旅中（https://angular.io/tutorial/toh-pt5#revise-the-herodetailcomponent）：

switchMap运算符将Observable路由参数中的id映射到一个新的Observable，即HeroService.getHero()方法的结果。如果用户在仍在处理getHero请求时重新导航到此组件，则switchMap会取消旧请求，然后再次调用HeroService.getHero()方法。

- Kylos

Answer 2

不要使用 reloadPage() 方法，而是使用 [routerLink] 属性，如下所示：

<a *ngFor="let product of products"
  [routerLink]="['/product-details', product.id]">
  {{ product.name }}
</a>

https://angular-2-training-book.rangle.io/handout/routing/routeparams.html

这篇文章可能对您有用。

- Taha Zgued