Uvod
Pri izradi aplikacija mogu se pojaviti scenariji u kojima želimo proslijediti neke argumente ili parametre kako bismo opisali ponašanje rute. U Angularu, oni se nazivaju upitni parametri i oni su neobavezni. Upitne parametre ne bi trebalo miješati s običnim rutnim parametrima koji su obavezni parametri i vezani su samo za jednu rutu.
Kako biste razjasnili razliku između rutnih parametara i upitnih parametara, zamislite da gradite aplikaciju koja pohranjuje proizvode. Možete imati rutu koja otvara bilo koji određeni proizvod pomoću product_id. Također možete odrediti upitni parametar: read_only. Kada je read_only postavljen na true, korisnik može samo pregledavati zapis, dok kada je read_only je false, korisnik također može uređivati zapis. Na taj način, koristeći samo jednu rutu, mogu se obraditi i slučajevi uređivanja i pregledavanja. Ovdje je product_id is the rutni parametar a read_only koji je neobavezan je upitni parametar.
Preduvjeti
Za potpuno razumijevanje ovog članka potrebno je poznavanje izrade aplikacija pomoću Angulara. Iskustvo s Angular Routerom, RouterLinkom i ActivatedRouteom također će biti korisno.
Prosljeđivanje upitnih parametara pomoću Router.navigate
Ako koristite Router.navigate za navigaciju kroz rute, koristite queryParams za slanje upitnih parametara.
U gornjem primjeru, ako želimo da posjetitelji vide popis proizvoda poredanih po popularnosti, koristit ćemo kod u nastavku:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular' } } ); } |
Korištenjem ovog koda, URL će postati:
|
1 |
http://localhost:4200/products?order=popular |
Međutim, mogu postojati scenariji u kojima moramo proslijediti više parametara prilikom navigacije. Na primjer, ako želimo poredati proizvode po popularnosti, ali i po cijeni, možemo koristiti kod u nastavku:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular', price: 'high-to-low' } } ); } |
Ovaj put URL će postati sljedeći:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
Time smo pokrili kako postaviti upitne parametre pomoću queryParams.
Sprječavanje gubitka upitnih parametara pomoću queryParamsHandling
Prilikom navigacije između ruta, parametri se obično gube. Pretpostavimo da ako proslijedimo argument arg0 on neće biti proslijeđen kada se dogodi naknadno usmjeravanje. Parametre možemo spremiti pomoću queryParamsHandling i postavljanjem vrijednosti na preserve ili merge.
U gornjem primjeru, pretpostavimo da želimo usmjeriti posjetitelje na stranicu brands sa stranice product s rutnim parametrom { order: 'popular' }, zadržavajući rutne parametre. Da bismo to učinili, možemo koristiti queryParamsHandling i postaviti ga na preserve :
|
1 2 3 4 5 6 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParamsHandling: 'preserve' } ); } |
To će učiniti da URL izgleda ovako:
|
1 |
http://localhost:4200/users?brand=popular |
Zatim, recimo da želimo sačuvati upitni parametar prethodne rute { order: 'popular' } dok dodajemo nove parametre { price: 'high-to-low' }. Možemo postaviti queryParamsHandling na merge:
|
1 2 3 4 5 6 7 8 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParams: { price: 'high-to-low' }, queryParamsHandling: 'merge' } ); } |
S gore navedenim kodom, URL će postati:
|
1 |
http://localhost:4200/brand?order=popular&price=high-to-low |
Ovdje završavamo očuvanje parametara upita pomoću queryParamsHandling za očuvanje ili spajanje.
Prosljeđivanje parametara upita pomoću RouterLink-a
Uzimajući u obzir našu prethodnu poveznicu, ako želimo koristiti RouterLink direktivu za navigaciju, morat ćemo proslijediti parametre upita pomoću queryParams kao u nastavku:
|
1 2 3 |
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> Proizvodi </a> |
Primijetite kako prosljeđujemo objekt u queryParams koristeći jednosmjerno povezivanje. Također možemo proslijediti cijeli objekt kao queryParams .
Nadalje, ako želimo prenijeti ove parametre upita na naknadnu navigaciju, možemo koristiti opciju queryParamsHandling. Moguće opcije za queryParamsHandling su merge i preserve:
|
1 2 |
<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">Proizvodi</a> |
Ovdje smo vidjeli kako proslijediti queryParams i rukovati parametrima pomoću queryParamsHandling u RouterLink.
Čitanje vrijednosti parametara upita
Do sada smo naučili kako proslijediti parametre upita u ruti. Ovi parametri su bili neobavezni i korišteni su za prijenos određenih informacija na odredišnu stranicu. Slanje parametara je jedan dio, ali također je potrebno pročitati parametre iz URL-a i koristiti ih.
U Angularu čitamo parametre upita rute pomoću klase ActivatedRoute. Klasa ActivatedRoute ima observable svojstvo pod nazivom queryParams kako bi se otkrili parametri trenutnog URL-a.
Pretpostavimo da radimo sa sljedećim URL-om:
|
1 |
http://localhost:4200/products?order=popular |
Za pristup parametru upita order u kodu, koristimo kod u nastavku:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { ActivatedRoute } from '@angular/router'; import 'rxjs/add/operator/filter'; @Component({ ... }) export class SampleComponent 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; }); } } |
Ovdje ćemo u konzoli vidjeti vrijednost order parametra upita “popular” ispisano. Ako imamo više parametara upita, možemo koristiti queryParamMap svojstvo koje vraća observable paramsMap objekt.
Ako imamo URL s više parametara upita kao što je:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
Možemo pristupiti ovim parametrima upita pomoću koda u nastavku:
|
1 2 3 4 5 |
this.route.queryParamMap .subscribe((params) => { this.queryObj = { ...params.keys, ...params }; } ); |
Koristeći operator širenja objekta ovdje, dobivamo rezultat u nastavku:
|
1 2 3 4 5 6 7 8 |
{ "0": "order", "1": "filter", "params": { "order": "popular", "price": "high-to-low" } } |
Konačno, trebali biste moći razumjeti kako pristupiti parametrima upita iz rezultirajućih ruta.
Zaključak
U ovom vodiču smo pogledali razliku između parametara upita i parametara rute. Također smo istražili kako proslijediti argumente kroz rute kao parametre upita te ih ponovno dohvatiti na stranici koristeći queryParams i queryParamsHandling s Router.navigate i RouterLink. Također smo naučili kako rukovati s queryParams i queryParamMap s ActivatedRoute.
Angular zahtijeva Javascript u svojoj bazi. Ako želite proširiti svoje znanje o Javascriptu, možete pogledati sljedeće blogove:
- Rad s JavaScriptom: Kako klase funkcioniraju
- Rad s JavaScriptom: Kako funkcioniraju prototipovi i nasljeđivanje
- JavaScript: Vodič o tome kako indeksirati, dijeliti i manipulirati nizovima znakova
Sretno programiranje!
Komentari
Još nema komentara. Budite prvi.