Verwendung von Query-Parametern mit Angular Router

Einführung

Beim Erstellen von Anwendungen kann es Szenarien geben, in denen wir Argumente oder Parameter übergeben möchten, um das Verhalten der Route zu beschreiben. In Angular, werden diese Query-Parameter genannt, und sie sind optional. Query-Parameter sollten nicht mit regulären Route-Parametern verwechselt werden, bei denen es sich um Pflichtparameter handelt, die an nur eine Route gebunden sind.

Um den Unterschied zwischen Route-Parametern und Query-Parametern zu verdeutlichen, stellen Sie sich vor, Sie erstellen eine Anwendung, die Produkte speichert. Sie können eine Route haben, die ein bestimmtes Produkt öffnet, unter Verwendung von product_id. Sie können auch einen Query-Parameter angeben: read_only. Wenn read_only auf true gesetzt ist, kann der Benutzer den Datensatz nur anzeigen, während wenn read_only den Wert false hat, kann der Benutzer den Datensatz auch bearbeiten. Auf diese Weise können mit nur einer Route sowohl Bearbeitungs- als auch Anzeige-Anwendungsfälle abgedeckt werden. Hier ist product_id der Route-Parameter und read_only, der optional ist, ist der Query -Parameter.

Voraussetzungen

Um diesen Artikel vollständig zu verstehen, ist Vertrautheit mit der Erstellung von Anwendungen mit Angular erforderlich. Erfahrung mit Angular Router, RouterLink und ActivatedRoute ist ebenfalls hilfreich.

Übergeben von Query-Parametern mit Router.navigate

Wenn Sie Router.navigate verwenden, um zwischen den Routen zu navigieren, verwenden Sie queryParams, um die Query-Parameter zu senden.

Wenn wir im obigen Beispiel möchten, dass die Besucher die Liste der Produkte nach Beliebtheit sortiert sehen, verwenden wir den folgenden Code:

Mit diesem Code wird die URL wie folgt aussehen:

Es kann jedoch Szenarien geben, in denen wir beim Navigieren mehrere Parameter übergeben müssen. Wenn wir beispielsweise die Produkte nach Beliebtheit und auch nach Preis sortieren möchten, können wir den folgenden Code verwenden:

Dieses Mal wird die URL wie folgt aussehen:

Damit ist abgeschlossen, wie Query-Parameter unter Verwendung von queryParams.

Verhindern des Verlusts von Query-Parametern mit queryParamsHandling

Beim Navigieren zwischen Routen gehen die Parameter tendenziell verloren. Angenommen, wir übergeben ein Argument arg0, wird es bei nachfolgenden Routing-Vorgängen nicht übergeben. Wir können die Parameter speichern, indem wir queryParamsHandling verwenden und den Wert auf preserve oder merge.

Nehmen wir im obigen Beispiel an, wir möchten die Besucher zur brands-Seite von der product-Seite mit dem Route-Parameter { order: 'popular' } leiten, während die Route-Parameter beibehalten werden. Dazu können wir queryParamsHandling verwenden und auf preserve :

Dadurch wird die URL wie folgt aussehen:

Nehmen wir als Nächstes an, wir möchten den Query-Parameter der vorherigen Route { order: 'popular' }  beibehalten, während wir neue Parameter { price: 'high-to-low' } hinzufügen. Wir können queryParamsHandling auf merge:

Mit dem obigen Code wird die URL wie folgt aussehen:

Hier schließen wir die Beibehaltung von Query-Parametern unter Verwendung von queryParamsHandling ab, um diese beizubehalten oder zusammenzuführen.

Query-Parameter mit RouterLink übergeben

Unter Berücksichtigung unseres vorherigen Links: Wenn wir die Direktive RouterLink zur Navigation verwenden möchten, müssen wir die Query-Parameter wie folgt mit queryParams übergeben:

Beachten Sie, wie wir das Objekt an queryParams mittels Einwegbindung übergeben. Wir können auch ein ganzes Objekt als queryParams .

Wenn wir diese Query-Parameter bei der nachfolgenden Navigation weitergeben möchten, können wir außerdem die Option queryParamsHandling verwenden. Die möglichen Optionen für queryParamsHandling sind merge  und preserve:

Hier haben wir gesehen, wie man die queryParams übergibt und die Parameter mittels queryParamsHandling in RouterLink.

handhabt.

Bis jetzt haben wir gelernt, wie man Query-Parameter in der Route übergibt. Diese Parameter waren optional und dienten dazu, der Zielseite bestimmte Informationen zu übermitteln. Das Senden der Parameter ist der eine Teil, aber es ist auch notwendig, die Parameter aus der URL auszulesen und zu verwenden.

In Angular lesen wir die Route-Query-Parameter mithilfe der Klasse ActivatedRoute aus. Die Klasse ActivatedRoute verfügt über eine Observable-Eigenschaft namens queryParams , um die Parameter der aktuellen URL anzuzeigen.

Angenommen, wir haben es mit der folgenden URL zu tun:

Um auf den Query-Parameter order im Code zuzugreifen, verwenden wir den folgenden Code:

Hier in der Konsole sehen wir den Wert des order-Query-Parameters, nämlich “popular” ausgegeben. Wenn wir mehrere Abfrageparameter haben, können wir die queryParamMap-Eigenschaft verwenden, die ein Observable paramsMap-Objekt zurückgibt.

Wenn wir die URL mit mehreren Abfrageparametern haben, wie:

Wir können auf diese Abfrageparameter mit dem folgenden Code zugreifen:

Unter Verwendung des Object-Spread-Operators erhalten wir hier das folgende Ergebnis:

Schließlich sollten Sie verstehen können, wie Sie auf Abfrageparameter aus den resultierenden Routen zugreifen.

Fazit

In diesem Tutorial haben wir uns den Unterschied zwischen Abfrageparametern und Routenparametern angesehen. Wir haben uns auch angesehen, wie man Argumente über die Routen hinweg als Abfrageparameter übergibt und sie auf der Seite wieder abruft, unter Verwendung von queryParams und queryParamsHandling mit Router.navigate und RouterLink. Wir haben auch gelernt, wie man queryParams und queryParamMap mit ActivatedRoute.

Angular benötigt JavaScript als Basis. Wenn Sie Ihr Wissen über JavaScript vertiefen möchten, können Sie sich die folgenden Blogs ansehen:

• Arbeiten mit JavaScript: Wie Klassen funktionieren
• Arbeiten mit JavaScript: Wie Prototypen und Vererbung funktionieren
• JavaScript: Ein Tutorial zum Indizieren, Aufteilen und Manipulieren von Strings

Viel Spaß beim Programmieren!