未檢測到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。

來源

2017-06-19 tschaka1904

你能爲此做一個蹲點嗎？「顏色」中只能有一個值，但你是如何添加兩個值的？ –

我可以試着把它變成笨蛋。在生長激素我已經更深入地描述了這個問題：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（）。

來源

2017-06-27 13:32:09 Kylos

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

這篇文章可能是你

有用

來源

2017-06-28 08:12:16

未檢測到queryparam的更改

回答

相關問題