未检测到queryparam的更改

问题描述：

我遇到问题以正确同步我的过滤器。至queryParams的ActivatedRoute。在那里我得到了query和我的三个过滤标准。未检测到queryparam的更改

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。

在我看来，this.route.queryParams.subscribe的change detection只是没有拿起queryParams['colour']的变化，因此只是没有更新。

我还打开了GH问题angular#17609。

你能为此做一个蹲点吗？ “颜色”中只能有一个值，但你是如何添加两个值的？ –

我可以试着把它变成笨蛋。在生长激素我已经更深入地描述了这个问题：https：//github.com/angular/angular/issues/17609 – tschaka1904

_你可以只有一个颜色值，但你是如何添加两个值_？ –

答

请参阅角度记录https://angular.io/guide/router#activatedroute-the-one-stop-shop-for-route-information。

您可能需要使用switchmap操作：

由于参数作为可观察到的提供，使用switchMap运营商按名称id参数提供给他们，并告诉HeroService获取英雄与该ID。

switchMap操作符允许您使用Observable的当前值执行操作，并将其映射到新的Observable。和许多rxjs运算符一样，switchMap处理Observable以及Promise来检索它们发出的值。

如果用户在仍然检索英雄时重新导航到路线，switchMap操作员也将取消任何正在进行的请求。

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

的switchMap操作者可观察路由参数的ID映射到一个新的观察的，所述HeroService.getHero（）方法的结果。

如果用户在getHero请求仍在处理时重新导航到此组件，则switchMap会取消旧请求，然后再次调用HeroService.getHero（）。

答

而不是使用您的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

这篇文章可能是你

有用

未检测到queryparam的更改

相关推荐