Tutorial

Wie man den Abfrageparameter in Angular verwendet

Published on November 16, 2020
Default avatar

By Alligator.io

Deutsch
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

Anmerkung: Die Beibehaltung von Abfrageparametern erfolgte früher mit perserveQueryParams, die auf wahr eingestellt waren, aber dies ist nun in Angular 4+ zugunsten von queryParamsHandling veraltet.

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

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel