Angular: So aktualisieren Sie queryParams, ohne die Route zu ändern

Ich versuche, queryParams von einer Komponente zu aktualisieren (hinzuzufügen, zu entfernen). In angleJS war dies 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, bestellen usw. kann, und ich möchte in den Abfrageparametern der URL alle aktivierten Filter festlegen, damit er die URL kopieren / einfügen oder für andere Personen freigeben kann.

Allerdings mag ich nicht meine Seite neu geladen wird jedes Mal , wenn ein Filter ausgewählt.

Ist das mit dem neuen Router machbar?

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 relativeToEigenschaft in meinem ursprünglichen Beispiel, sodass auch die Route geändert werden konnte, nicht nur die Abfrageparameter. Die ordnungsgemäße this.router.navigateVerwendung ist in diesem Fall:

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

Wenn Sie den neuen Parameterwert auf setzen, nullwird der Parameter aus der URL entfernt.

@ Radosław Roszkowiaks Antwort ist fast richtig, außer dass relativeTo: this.routedies wie folgt erforderlich ist:

constructor(
  private router: Router,
  private route: ActivatedRoute,
) {}

changeQuery() {
  this.router.navigate(['.'], { relativeTo: this.route, queryParams: { ... }});
}

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.

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

  this.router.navigateByUrl(urlTree); 

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 .

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, können Sie ihn auf undefinedoder setzen null.

Versuchen

this.router.navigate([], { 
  queryParams: {
    query: value
  }
});

funktioniert für dieselbe Routennavigation außer in einfachen Anführungszeichen.

Die Antwort mit den meisten Stimmen hat teilweise für mich funktioniert. Die Browser-URL blieb gleich, aber meinerouterLinkActive funktionierte nach der Navigation nicht mehr.

Meine Lösung war die Verwendung von lotation.go:

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { HttpParams } from "@angular/common/http";

export class whateverComponent {
  constructor(private readonly location: Location, private readonly router: Router) {}

  addQueryString() {
    const params = new HttpParams();
    params.append("param1", "value1");
    params.append("param2", "value2");
    this.location.go(this.router.url.split("?")[0], params.toString());
  }
}

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.

Ich landete Kombination urlTreemitlocation.go

const urlTree = this.router.createUrlTree([], {
       relativeTo: this.route,
       queryParams: {
           newParam: myNewParam,
       },
       queryParamsHandling: 'merge',
    });

    this.location.go(urlTree.toString());

Ich bin mir nicht sicher, ob toStringdies Probleme verursachen kann location.go, scheint aber leider stringbasiert zu sein.

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

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.

Zuerst müssen wir das Routermodul vom Winkelrouter importieren und seinen Aliasnamen deklarieren

import { Router } from '@angular/router'; ---> import
class AbcComponent implements OnInit(){
constructor(
    private router: Router ---> decalre alias name
  ) { }
}

1. Sie können die Abfrageparameter mithilfe der Funktion "router.navigate" ändern und die Abfrageparameter übergeben

this.router.navigate([], { queryParams: {_id: "abc", day: "1", name: "dfd"} 
});

Die Abfrageparameter werden in der aktuell dh aktivierten Route aktualisiert

2. 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: -

    import { ActivatedRoute } from '@angular/router'; //import activated routed

    export class ABC implements OnInit {

    constructor(
        private route: ActivatedRoute //declare its alias name
      ) {}

    ngOnInit(){
       console.log(this.route.snapshot.queryParamMap.get('_id')); //this will fetch the query params
    }