Sie können mit neuen Abfrageparametern zur aktuellen Route navigieren, wodurch Ihre Seite nicht neu geladen, sondern die Abfrageparameter aktualisiert werden.
So etwas wie (in der Komponente):
constructor(private router: Router) { }
public myMethodChangingQueryParams() {
const queryParams: Params = { myParam: 'myNewValue' };
this.router.navigate(
[],
{
relativeTo: activatedRoute,
queryParams: queryParams,
queryParamsHandling: 'merge', // remove to replace all query params by provided
});
}
Beachten Sie, dass die Seite zwar nicht neu geladen wird, jedoch ein neuer Eintrag in den Browserverlauf verschoben wird. Wenn Sie es im Verlauf ersetzen möchten, anstatt dort einen neuen Wert hinzuzufügen, können Sie es verwenden { queryParams: queryParams, replaceUrl: true }
.
BEARBEITEN: Wie bereits in den Kommentaren erwähnt, fehlte []
die relativeTo
Eigenschaft in meinem ursprünglichen Beispiel, sodass auch die Route geändert werden konnte, nicht nur die Abfrageparameter. Die ordnungsgemäße this.router.navigate
Verwendung ist in diesem Fall:
this.router.navigate(
[],
{
relativeTo: this.activatedRoute,
queryParams: { myParam: 'myNewValue' },
queryParamsHandling: 'merge'
});
Wenn Sie den neuen Parameterwert auf setzen, null
wird der Parameter aus der URL entfernt.
Radosław Roszkowiak
quelle
[]
anstatt es['.']
zum Laufen zu bringenthis.activatedRoute.queryParams.subscribe
Ihre Komponente durchführen und verschiedene Aktualisierungen in Ihrer Komponente vornehmen. Gibt es jedoch eine einfache Angular-Methode, um die Route so zu laden, dass das Vor- und Zurückschalten automatisch funktioniert?@ Radosław Roszkowiaks Antwort ist fast richtig, außer dass
relativeTo: this.route
dies wie folgt erforderlich ist:quelle
In Angular 5 können Sie einfach eine Kopie des urlTree abrufen und ändern, indem Sie die aktuelle URL analysieren . Dies umfasst Abfrageparameter und Fragmente.
Der „richtige Weg“ einen Abfrageparameter zu ändern , ist wahrscheinlich mit dem createUrlTree wie , unter dem ein neues UrlTree aus dem Strom erzeugt , während wir es mit Stich gelassen ändern NavigationExtras .
Um einen Abfrageparameter auf diese Weise zu entfernen, können Sie ihn auf
undefined
oder setzennull
.quelle
navigateByUrl
unterscheidet sich vonnavigate
- nicht nur mit dem UrlTree-Parameter. Siehe stackoverflow.com/a/45025432/271012Versuchen
funktioniert für dieselbe Routennavigation außer in einfachen Anführungszeichen.
quelle
Die Antwort mit den meisten Stimmen hat teilweise für mich funktioniert. Die Browser-URL blieb gleich, aber meine
routerLinkActive
funktionierte nach der Navigation nicht mehr.Meine Lösung war die Verwendung von lotation.go:
Ich habe HttpParams verwendet, um die Abfragezeichenfolge zu erstellen, da ich sie bereits zum Senden von Informationen mit httpClient verwendet habe. aber du kannst es einfach selbst bauen.
und das
this._router.url.split("?")[0]
ist, alle vorherigen Abfragezeichenfolgen aus der aktuellen URL zu entfernen.quelle
this.location.path().split...
besserIch landete Kombination
urlTree
mitlocation.go
Ich bin mir nicht sicher, ob
toString
dies Probleme verursachen kannlocation.go
, scheint aber leider stringbasiert zu sein.quelle
Wenn Sie Abfrageparameter ändern möchten, ohne die Route zu ändern. Das folgende Beispiel könnte Ihnen helfen: Die aktuelle Route lautet: / search & Die Zielroute lautet (ohne Seite zum erneuten Laden): / search? query = love
Bitte beachten Sie: Sie können this.router.navigate (['search'] anstelle von this.router.navigate (['.']) verwenden.
quelle
relativeTo:
, aber das.then()
war hilfreich - war sich nicht bewusst, dass navigieren () ein Versprechen zurückgegeben hat, also froh, dass Sie gepostet haben!Zuerst müssen wir das Routermodul vom Winkelrouter importieren und seinen Aliasnamen deklarieren
1. Sie können die Abfrageparameter mithilfe der Funktion "router.navigate" ändern und die Abfrageparameter übergeben
Die Abfrageparameter werden in der aktuell dh aktivierten Route aktualisiert
Im Folgenden wird auf die abc-Seite mit _id, Tag und Name als Abfrageparameter umgeleitet
this.router.navigate (['/ abc'], {queryParams: {_id: "abc", Tag: "1", Name: "dfd"}});
Die Abfrageparameter in der "abc" -Route werden zusammen mit drei Abfrageparametern aktualisiert
Zum Abrufen von Abfrageparametern: -
quelle