Angular: Wie man queryParams ohne Änderung der Route aktualisiert

Ich versuche zu aktualisieren (hinzufügen, entfernen) queryParams aus einer Komponente. In angularJS war es früher möglich, dank:

$location.search('f', 'filters[]'); // setter
$location.search()['filters[]'];    // getter

Ich habe eine App mit einer Liste, die der Benutzer filtern kann, um, etc. und ich möchte in der queryParams der Url alle Filter aktiviert, so dass er kopieren / einfügen die Url oder teilen Sie es mit jemandem anderen zu setzen.

Ich möchte jedoch nicht, dass meine Seite jedes Mal, wenn ein Filter ausgewählt wird, neu geladen wird**.

Ist dies mit dem neuen Router machbar?

Jota.Toledo
Bearbeitete Frage 6. Oktober 2017 в 8:55
Programmierung
angular query-parameters angular-router
29. April 2017 в 4:33
noch keine Aufrufe

Sie können zur aktuellen Route mit neuen Abfrageparametern navigieren, wodurch Ihre Seite nicht neu geladen, sondern die Abfrageparameter aktualisiert werden.

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 dadurch zwar die Seite nicht neu geladen wird, aber ein neuer Eintrag in den Browserverlauf geschrieben wird. Wenn Sie den Eintrag in der History ersetzen möchten, anstatt einen neuen Wert hinzuzufügen, können Sie { queryParams: queryParams, replaceUrl: true } verwenden.

EDIT: Wie bereits in den Kommentaren erwähnt, fehlten in meinem ursprünglichen Beispiel [] und die Eigenschaft relativeTo, so dass es auch die Route hätte ändern können, nicht nur queryParams. Die richtige Verwendung von this.router.navigate wird in diesem Fall sein:

this.router.navigate(
  [], 
  {
    relativeTo: this.activatedRoute,
    queryParams: { myParam: 'myNewValue' },
    queryParamsHandling: 'merge'
  });

Wenn man den neuen Parameterwert auf null setzt, wird der Parameter aus der URL entfernt.

Phil
Bearbeitete Antwort 18. Juli 2019 в 7:53
Kommentare (11)

In Angular 5 können Sie einfach eine Kopie des urlTree erhalten und ändern, indem Sie die aktuelle URL parsen. Dies wird Abfrageparameter und Fragmente enthalten.

  let urlTree = this.router.parseUrl(this.router.url);
  urlTree.queryParams['newParamKey'] = 'newValue';

  this.router.navigateByUrl(urlTree);

Der "korrekte Weg" um einen Abfrageparameter zu ändern ist wahrscheinlich mit dem createUrlTree wie unten, das einen neuen UrlTree aus dem aktuellen erstellt, während wir ihn mit NavigationExtras ändern können.

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

constructor(private router: Router) { }

appendAQueryParam() {

  const urlTree = this.router.createUrlTree([], {
    queryParams: { newParamKey: 'newValue' },
    queryParamsHandling: "merge",
    preserveFragment: true });

  this.router.navigateByUrl(urlTree); 
}

Um einen Abfrageparameter auf diese Weise zu entfernen, kann man ihn auf undefined oder null setzen.

Kommentare (1)

Wenn Sie die Abfrageparameter ändern möchten, ohne die Route zu ändern, siehe unten. Beispiel könnte Ihnen helfen: Die aktuelle Route ist : /search & Zielroute ist (ohne Neuladen der Seite) : /search?query=love

submit(value: string) {
{ this.router.navigate( ['.'],  { queryParams: { query: value } })
    .then(_ => this.search(q));
}
search(keyword:any) { 
//do some activity using }

Bitte beachten Sie: Sie können this.router.navigate( ['search'] anstelle von this.router.navigate( ['.'] verwenden

Kommentare (1)