クエリアパラムの変化が検出されない

Question

フィルタを正しく同期させるために問題があります。 I subscribe〜queryParamsはActivatedRouteである。そこに私はqueryと私の3つのフィルタ基準を取得します。

私は、フィルタをクリックして、これまで、私は私の reloadPage()を呼び出して、新しい queryparamsを与え、ちょうど新しい queryparamsと同じページに移動し、 colour:blueを言うことができます

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

。

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が欲しいです。私はとorangeを含むqueryParams['colour']に追加されます。しかし何らかの理由でorangeがURLに追加されていても、それはqueryParams['colour']で終了します。別の条件のフィルタを追加すると、heightと言うと、すべてがうまく機能し、heightフィルタが追加され、colour:orangeも追加されます。

this.route.queryParams.subscribeのchange detectionは、queryParams['colour']の変更を受け取っておらず、したがって更新していないようです。

また、GHの問題angular#17609も開設しました。

Answer 1

角度の書類https://angular.io/guide/router#activatedroute-the-one-stop-shop-for-route-informationを参照してください。

おそらくswitchmap演算子を使用する必要があります。

パラメータが観察可能として提供されているので、あなたが名前でidパラメータのためにそれらを提供するために、switchMap演算子を使用してヒーローを取得するためにHeroServiceを伝えますそのidと

switchMap演算子を使用すると、Observableの現在の値でアクションを実行し、それを新しいObservableにマップできます。多くのrxjs演算子と同様に、switchMapはObservableとPromiseを処理して、それらが出力する値を取得します。

switchMapオペレータは、依然としてヒーローを取得している間にユーザーが経路を再ナビゲートすると、飛行中のリクエストもキャンセルします。

ヒーローのツアー（https://angular.io/tutorial/toh-pt5#revise-the-herodetailcomponent）から：

switchMapオペレータはHeroService.getHero（）メソッドの新たな観測結果に観測ルートパラメータのIDをマッピングします。

getHeroリクエストの処理中にユーザーがこのコンポーネントに再度移動した場合、switchMapは古いリクエストをキャンセルしてから再度HeroService.getHero（）を呼び出します。

Answer 2

だけではなく[routerLink]そうのような属性を使用し、あなたのreloadPage（）、ボイドを使用して：

<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

この記事はあなたの

のために役に立つかもしれません