Queryparameters gebruiken met Angular Router

Introductie

Bij het bouwen van applicaties kunnen er scenario's zijn waarin we enkele argumenten of parameters willen doorgeven om het gedrag van de route te beschrijven. In Angular, worden deze query-parameters genoemd, en ze zijn optioneel. Query-parameters moeten niet worden verward met reguliere route-parameters die verplichte parameters zijn en aan slechts één route zijn gekoppeld.

Om het verschil tussen routeparameters en query-parameters te verduidelijken, stel je voor dat je een applicatie bouwt die producten opslaat. Je kunt een route hebben die een specifiek product opent met behulp van product_id. Je kunt ook een query-parameter specificeren: read_only. Wanneer de read_only is ingesteld op true, kan de gebruiker het record alleen bekijken, terwijl wanneer de read_only is false, kan de gebruiker het record ook bewerken. Op deze manier kunnen met slechts één route zowel bewerk- als weergavescenario's worden afgehandeld. Hier is product_id de routeparameter en de read_only die optioneel is, is de query parameter.

Vereisten

Om dit artikel volledig te begrijpen, is bekendheid met het bouwen van applicaties met Angular vereist. Ervaring met Angular Router, RouterLink en ActivatedRoute is ook nuttig.

Query-parameters doorgeven met Router.navigate

Als je Router.navigate gebruikt om door de routes te navigeren, gebruik dan queryParams om de query-parameters te verzenden.

In het bovenstaande voorbeeld, als we willen dat de bezoekers de lijst met producten gesorteerd op populariteit zien, gebruiken we de onderstaande code:

Met deze code wordt de URL:

Er kunnen echter scenario's zijn waarin we meerdere parameters moeten doorgeven bij het navigeren. Als we bijvoorbeeld de producten willen sorteren op populariteit en ook op prijs, kunnen we de onderstaande code gebruiken:

Dit keer wordt de URL als volgt:

Dit sluit af hoe je query-parameters instelt met behulp van queryParams.

Verlies van query-parameters voorkomen met queryParamsHandling

Bij het navigeren tussen routes gaan de parameters vaak verloren. Stel dat we een argument arg0 doorgeven, dan wordt dit niet doorgegeven bij volgende routering. We kunnen de parameters opslaan met behulp van queryParamsHandling en de waarde in te stellen op preserve of merge.

In het bovenstaande voorbeeld, stel dat we de bezoekers naar de brands-pagina willen leiden vanaf de product met routeparameter { order: 'popular' }, met behoud van de routeparameters. Om dit te doen, kunnen we de queryParamsHandling gebruiken en deze instellen op preserve :

Dit zorgt ervoor dat de URL er als volgt uitziet:

Stel vervolgens dat we de query-parameter van de vorige route willen behouden { order: 'popular' }  terwijl we nieuwe parameters toevoegen { price: 'high-to-low' }. We kunnen de queryParamsHandling instellen op merge:

Met de bovenstaande code wordt de URL:

Hier sluiten we het behoud van queryparameters af met behulp van queryParamsHandling om te behouden of samen te voegen.

Queryparameters doorgeven met RouterLink

Als we rekening houden met onze vorige link en we willen de RouterLink-richtlijn gebruiken om te navigeren, moeten we de queryparameters doorgeven met behulp van queryParams zoals hieronder:

Let op hoe we het object doorgeven aan de queryParams met behulp van de eenrichtingsbinding. We kunnen ook een heel object doorgeven als de queryParams .

Als we deze queryparameters bovendien willen meenemen naar een volgende navigatie, kunnen we de optie queryParamsHandling gebruiken. De mogelijke opties van queryParamsHandling zijn merge  en preserve:

Hier hebben we gezien hoe we de queryParams kunnen doorgeven en hoe we de parameters kunnen afhandelen met behulp van queryParamsHandling in RouterLink.

Waarden van queryparameters lezen

Tot nu toe hebben we geleerd hoe we de queryparameters in de route kunnen doorgeven. Deze parameters waren optioneel en werden gebruikt om informatie over te dragen aan de bestemmingspagina. Het verzenden van de parameters is één ding, maar het is ook nodig om de parameters uit de URL te lezen en te gebruiken.

In Angular lezen we de route-queryparameters met behulp van de klasse ActivatedRoute. De ActivatedRoute heeft een observable eigenschap genaamd queryParams om de parameters van de huidige URL te onthullen.

Stel dat we te maken hebben met de volgende URL:

Om toegang te krijgen tot de queryparameter order in de code, gebruiken we de onderstaande code:

Hier in de console zien we de waarde van de order-queryparameter, namelijk “popular” afgedrukt. Als we meerdere queryparameters hebben, kunnen we de queryParamMap eigenschap gebruiken die een observable retourneert paramsMap object.

Als we de URL hebben met meerdere queryparameters zoals:

We hebben toegang tot deze queryparameters met de onderstaande code:

Met behulp van de object spread-operator hier, krijgen we het onderstaande resultaat:

Ten slotte zou je nu moeten begrijpen hoe je toegang krijgt tot queryparameters vanuit de resulterende routes.

Conclusie

In deze handleiding hebben we gekeken naar het verschil tussen queryparameters en routeparameters. We hebben ook gekeken naar hoe we de argumenten over de routes kunnen doorgeven als queryparameters en ze ook weer kunnen ophalen op de pagina met behulp van queryParams and queryParamsHandling met Router.navigate en RouterLink. We hebben ook geleerd hoe we moeten omgaan met queryParams en queryParamMap met ActivatedRoute.

Angular vereist JavaScript in de basis. Als je je kennis over JavaScript wilt uitbreiden, kun je de volgende blogs bekijken:

• Werken met JavaScript: hoe klassen werken
• Werken met JavaScript: hoe prototypen en overervingen werken
• JavaScript: een handleiding over het indexeren, splitsen en manipuleren van strings

Veel programmeerplezier!