未检测到queryparam的更改

Question

我有问题要正确同步我的过滤器.我subscribe到queryParams的ActivatedRoute.在那里,我得到了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,nether被添加到网址中,即使它退出了queryParams['colour'].如果我现在添加另一个标准的过滤器,让我们说height,一切都运行良好和平滑,height过滤器将被添加,也是colour:orange.

在我看来,该change detection的this.route.queryParams.subscribe是不捡的变化queryParams['colour'],因此只是没有更新.

我还开了一个GH问题角#17609.

Answer 1

请参阅角度文档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()。