Geek Answers Handbook

Request change not detected

I am having a problem with filter synchronization. I'm subscribeup to queryParamsof ActivatedRoute. There I get the criteria queryand my three filters.

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

When I click on the filter, let's say colour:blueI call mine reloadPage()and issue a new one queryParamsand go to the same page only with the new one 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,
    });

Everything works perfectly. Now we have chosen colour:blue, but I also want colour:orange. I will be added to queryParams['colour'], which then contains blueand orange. But for some reason orangeit is not added to the url, even it goes to queryParams['colour']. If we now add a filter of another criterion, let's say heighteverything will be fine and smooth, and the filter heightwill be added as well colour:orange.

, change detection this.route.queryParams.subscribe queryParams['colour'] .

GH angular # 17609.

+6
2

angular https://angular.io/guide/router#activatedroute-the-one-stop-shop-for-route-information.

, :

, switchMap, id HeroService, .

switchMap Observable Observable. rxjs, switchMap Observable, Promise , .

switchMap , , .

(https://angular.io/tutorial/toh-pt5#revise-the-herodetailcomponent):

switchMap Observable route Observable, HeroService.getHero().

, getHero , HeroService.getHero().

+1

reloadPage() void [routerLink] :

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

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

+1

More articles:


All Articles