Änderung des Abfrageparam nicht erkannt

Question

Ich habe ein Problem, meinen Filter richtig zu synchronisieren. I subscribe bis queryParams von ActivatedRoute. Dort bekomme ich die query und meine drei Filterkriterien.

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

Wann immer ich auf einem Filter klicken, colour:blue kann sagen, rufe ich meine reloadPage() und gebe die neuen queryparams und auf die gleiche Seite navigieren nur mit den neuen 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, 
    }); 

Das funktioniert alles in Ordnung. Jetzt haben wir colour:blue ausgewählt, aber ich möchte auch colour:orange. Ich werde zu der queryParams['colour'] hinzugefügt, die dann blue und orange enthält. Aber aus irgendeinem Grund orange ist Nether hinzugefügt, um die URL, auch in queryParams['colour']. Wenn ich jetzt einen Filter eines anderen Kriteriums hinzufüge, sagen wir height, funktioniert alles gut und glatt und der height Filter wird hinzugefügt und auch der colour:orange.

Es scheint mir, dass die change detection der this.route.queryParams.subscribe gerade nicht die Änderung der queryParams['colour'] abgreift und deshalb gerade nicht aktualisiert.

Ich öffnete auch eine GH-Ausgabe angular#17609.

Answer 1

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

Sie wahrscheinlich den switchmap Operator verwenden müssen:

Da die Parameter als beobachtbare vorgesehen sind, verwenden Sie den switchMap Operator sie für den id-Parameter mit Namen zu geben und die HeroService sagen, den Helden zu holen mit dieser ID.

Der switchMap-Operator ermöglicht Ihnen, eine Aktion mit dem aktuellen Wert des Observable durchzuführen und einem neuen Observable zuzuordnen. Wie bei vielen rxjs-Operatoren behandelt switchMap sowohl ein Observable als auch ein Promise, um den von ihnen ausgegebenen Wert abzurufen.

Der SwitchMap-Operator löscht auch alle In-Flight-Anfragen, wenn der Benutzer zur Route zurückkehrt, während er noch einen Helden abholt.

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

Der switchMap Operator bildet die ID in den beobachtbaren Routenparameter zu einem neuen beobachtbare, das Ergebnis des Verfahrens HeroService.getHero().

Wenn ein Benutzer zu dieser Komponente re-navigiert, während eine getHero-Anfrage noch verarbeitet wird, bricht switchMap die alte Anfrage ab und ruft HeroService.getHero() erneut auf.

Answer 2

Statt Ihre reloadPage verwenden() void verwenden nur [Router] Attribut wie folgt:

<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

Dieser Artikel könnte für Sie

nützlich sein