Wie man den Abfrageparameter in Angular verwendet

Einführung

Abfrageparameter in Angular ermöglichen die Übergabe optionaler Parameter über eine beliebige Route in der Anwendung. Abfrageparameter unterscheiden sich von regulären Routenparametern, die nur auf einer Route verfügbar und nicht optional sind (z. B. /product/:id).

In diesem Artikel verweisen wir auf ein Beispiel für eine Anwendung, die eine Liste von Produkten anzeigt.  Wir bieten optionale Werte für order und price-range an, die von der empfangenden Komponente gelesen und umgesetzt werden können. Die angegebenen Werte wirken sich auf die Reihenfolge und Filterung der Produktliste aus.

Verwenden der Abfrageparameter mit Router.navigate

Wenn Sie unbedingt mit Router.navigate zur Route navigieren möchten, übergeben Sie Abfrageparameter mit qeryParams.

Wenn wir in unserem Beispiel Besucher zu den Produkten mit der nach Beliebtheit geordneten Liste weiterleiten möchten, sieht dies folgendermaßen aus:

goProducts() {
  this.router.navigate(['/products'], { queryParams: { order: 'popular' } });
}

Dies führt zu einer URL, die wie folgt aussieht:

http://localhost:4200/products?order=popular

Sie können auch mehrere Abfrageparameter bereitstellen. Wenn wir in unserem Beispiel Besucher zu den Produkten mit der nach Beliebtheit geordneten und nach einer teuren Preisspanne gefilterten Liste weiterleiten möchten, sieht dies folgendermaßen aus:

goProducts() {
  this.router.navigate(['/products'], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } });
}

Dies führt zu einer URL, die wie folgt aussieht:

http://localhost:4200/products?order=popular&price-range=not-cheap

Jetzt haben Sie ein Verständnis dafür, wie queryParams verwendet werden können, um Abfrageparameter festzulegen.

Beibehalten oder Zusammenführen von Abfrageparametern mit queryParamsHandling

Standardmäßig gehen die Abfrageparameter bei jeder nachfolgenden Navigationsaktion verloren.  Um dies zu verhindern, können Sie queryParamsHandling entweder auf 'preserve' oder 'merge' festlegen.

Wenn wir in unserem Beispiel die Besucher von einer Seite mit dem Abfrageparameter{ Reihenfolge: „nach Beliebtheit“ } zur Seite /Benutzer unter Beibehaltung der Abfrageparameter weiterleiten, verwenden wir 'preserve' :

goUsers() {
  this.router.navigate(['/users'], { queryParamsHandling: 'preserve' });
}

Dies führt zu einer URL, die wie folgt aussieht:

http://localhost:4200/users?order=popular

Wenn wir in unserem Beispiel die Besucher von einer Seite mit dem Abfrageparameter { Reihenfolge: „nach Beliebtheit“' } zur Seite /Benutzer weiterleiten, während wir den Abfrageparameter { Filter: „neu“ } übergeben, verwenden wir „zusammenführen“:

goUsers() {
  this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: 'merge' });
}

Dies führt zu einer URL, die wie folgt aussieht:

http://localhost:4200/users?order=popular&filter=new

Jetzt haben Sie ein Verständnis dafür, wie queryParamsHandling verwendet werden kann, um Abfrageparameter festzulegen.

Verwenden der Abfrageparameter mit RouterLink

Wenn Sie stattdessen die Anforderung RouterLink verwenden, um zur Route zu navigieren, verwenden Sie queryParams wie folgt:

<a [routerLink]="['/products']" [queryParams]="{ order: 'popular'}">
  Products
</a>

Und wenn Sie in unserem Beispiel Abfrageparameter für die nachfolgende Navigation „beibehalten“ oder „zusammenführen“ möchten, verwenden Sie queryParamsHandling wie folgt:

<a [routerLink]="['/users']"
   [queryParams]="{ filter: 'new' }"
   queryParamsHandling="merge">
  Users
</a>

Jetzt verstehen Sie, wie queryParams und queryParamsHandling mit RouterLink verwendet werden können.

Zugriff auf Abfrageparameterwerte

Nachdem wir nun wissen, wie optionale Abfrageparameter an eine Route übergeben werden, wollen wir sehen, wie auf diese Werte auf den resultierenden Routen zugegriffen werden kann. Die Klasse ActivatedRoute verfügt über eine Eigenschaft queryParams, die eine Beobachtung der Abfrageparameter zurückgibt, die in der aktuellen URL verfügbar sind.

Angesichts der folgenden Routen-URL:

http://localhost:4200/products?order=popular

Können wir wie folgt auf den Abfrageparameter Reihenfolge zugreifen:

// ...
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({ ... })
export class ProductComponent implements OnInit {
  order: string;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.order)
      .subscribe(params => {
        console.log(params); // { order: "popular" }

        this.order = params.order;
        console.log(this.order); // popular
      }
    );
  }
}

Im Konsolenprotokoll sehen wir das Objekt params wie folgt:

Output
{ order: "popular" }

Und den Wert params.order:

Output
popular

Es gibt auch queryParamMap, der eine Beobachtung mit einem paramMap-Objekt zurückgibt.

Angesichts der folgenden Routen-URL:

http://localhost:4200/products?order=popular&filter=new

Können wir wie folgt auf die Abfrageparameter zugreifen:

this.route.queryParamMap
  .subscribe((params) => {
    this.orderObj = { ...params.keys, ...params };
  }
);

Wir haben hier den Objektverteilungsoperator verwendet, und dies ist die resultierende Form der Daten in orderObj:

{
  "0": "order",
  "1": "filter",
  "params": {
    "order": "popular",
    "filter": "new"
  }
}

Jetzt wissen Sie, wie queryParams und queryParamMap verwendet werden können, um auf die Werte der resultierenden Routen zuzugreifen.

Zusammenfassung

In diesem Artikel haben Sie verschiedene Beispiele zum Festlegen und Abrufen von Abfrageparametern in Angular verwendet. Ihnen wurde queryParams und queryParamsHandling mit Router.navigate und RouterLink vorgestellt. Ihnen wurde auch mit ActivatedRoute queryParams und queryParamMap vorgestellt.

Wenn Sie mehr über Angular erfahren möchten, lesen Sie unsere Seite Angular für Übungen und Programmierprojekte.