Wie kann ich die Routenparameter von Angular2 ändern, ohne zur Route zu navigieren?

Question

Ich habe eine angular2 Seite zeigt eine Liste von Elementen. Ich beschränke die Liste zunächst durch die Routen paramters mit so meine URL so etwas wie ist:

http://localhost:54675/#/listing?filter= { "Country": [6, 7]}

Dies zeigt Elemente in dem Land mit einem ID von 6 oder 7.

Dann fügt der Benutzer ein drittes Land (sagen wir 8) hinzu und ich mache einen Serviceanruf, der die Liste aktualisiert. Da die Listenelemente an eine Observable gebunden sind, wird die Liste dann auf dem Bildschirm aktualisiert.

Das ist genau das Verhalten, das ich will. Wenn der Benutzer diese Seite markiert, erhält er nur die ursprünglichen Routenparameter und nicht die gefilterten Ergebnisse.

Um dies zu beheben, die ich benutze:

this._router.navigate(['listing', { filter: newfilter }]); 

Dies ist die Seite mit dieser Route neu geladen:

http://localhost:54675/#/listing?filter= { "Land": [6,7,8]}

Dies hält alles synchron und Lesezeichen funktionieren. Es gibt jedoch eine vollständige Aktualisierung der Seite. Andere Elemente werden erneut geladen - nicht nur die gefilterten Ergebnisse. Ich mag auch die visuellen Ergebnisse besser, wenn es nur ein einziger Service-Anruf ist.

Ich brauche eine Möglichkeit, um die Routenparameter zu ändern, ohne die Seite neu zu laden.

Answer 1

Sie können die Router nur zum Erstellen der URL verwenden und dann die Location verwenden, um die URL ohne Navigation zu ändern.

Etwas wie folgt aus:

import { Location } from '@angular/common'; 
import { Router } from '@angular/router'; 

// Generate the URL: 
let url = this.router.createUrlTree(['listing', { filter: newfilter }]).toString(); 

// Change the URL without navigate: 
this.location.go(url);