Bevezetés
Alkalmazások építésekor előfordulhatnak olyan forgatókönyvek, amikor szeretnénk átadni néhány argumentumot vagy paramétert az útvonal viselkedésének leírására. Az Angular-ban ezeket query paramétereknek nevezzük, és ezek opcionálisak. A query paramétereket nem szabad összetéveszteni a normál route paraméterekkel, amelyek kötelező paraméterek, és csak egyetlen útvonalhoz vannak kötve.
A route paraméterek és a query paraméterek közötti különbség tisztázásához képzelje el, hogy egy termékeket tároló alkalmazást épít. Lehet egy olyan útvonala, amely egy adott terméket nyit meg a következő használatával: product_id. Megadhat egy query paramétert is: read_only. Amikor a read_only értéke true, a felhasználó csak megtekintheti a rekordot, míg ha a read_only értéke false, a felhasználó szerkesztheti is a rekordot. Így egyetlen útvonal használatával mind a szerkesztési, mind a megtekintési esetek kezelhetők. Itt a product_id a route paraméter és az opcionális read_only pedig a query paraméter.
Előfeltételek
A cikk teljes megértéséhez szükséges az Angular használatával történő alkalmazásfejlesztés ismerete. Az Angular Router, a RouterLink és az ActivatedRoute használatában szerzett tapasztalat szintén hasznos lesz.
Query paraméterek átadása a Router.navigate használatával
Ha a Router.navigate metódust használja az útvonalak közötti navigáláshoz, használja a queryParams tulajdonságot a query paraméterek küldéséhez.
A fenti példában, ha azt szeretnénk, hogy a látogatók a termékek listáját népszerűség szerint rendezve lássák, az alábbi kódot fogjuk használni:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular' } } ); } |
Ezt a kódot használva az URL a következő lesz:
|
1 |
http://localhost:4200/products?order=popular |
Előfordulhatnak azonban olyan forgatókönyvek is, amikor navigáláskor több paramétert kell átadnunk. Ha például a termékeket népszerűség és ár szerint is rendezni szeretnénk, az alábbi kódot használhatjuk:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular', price: 'high-to-low' } } ); } |
Ezúttal az URL a következőképpen fog alakulni:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
Ezzel le is fedtük, hogyan állíthatunk be query paramétereket a queryParams.
A query paraméterek elvesztésének megelőzése a queryParamsHandling használatával
Az útvonalak közötti navigálás során a paraméterek hajlamosak elveszni. Tegyük fel, hogy ha átadunk egy arg0 argumentumot, az a későbbi útvonalválasztás során nem kerül átadásra. A paramétereket elmenthetjük a queryParamsHandling használatával, és az értékét preserve vagy merge.
A fenti példában tegyük fel, hogy a látogatókat a brands oldalra szeretnénk irányítani a product oldalról a következő route paraméterrel: { order: 'popular' }, miközben megtartjuk a route paramétereket. Ehhez használhatjuk a queryParamsHandling tulajdonságot, és beállíthatjuk az értékét preserve :
|
1 2 3 4 5 6 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParamsHandling: 'preserve' } ); } |
Ezáltal az URL így fog kinézni:
|
1 |
http://localhost:4200/users?brand=popular |
Ezután tegyük fel, hogy meg szeretnénk tartani az előző útvonal query paraméterét: { order: 'popular' } miközben új paramétereket adunk hozzá: { price: 'high-to-low' }. Beállíthatjuk a queryParamsHandling értékét merge:
|
1 2 3 4 5 6 7 8 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParams: { price: 'high-to-low' }, queryParamsHandling: 'merge' } ); } |
A fenti kóddal az URL a következő lesz:
|
1 |
http://localhost:4200/brand?order=popular&price=high-to-low |
Itt befejezzük a lekérdezési paraméterek megőrzését a queryParamsHandling használatával a megőrzéshez vagy az összevonáshoz.
Lekérdezési paraméterek átadása a RouterLink segítségével
Figyelembe véve az előző linkünket, ha a RouterLink direktívát szeretnénk használni a navigációhoz, a lekérdezési paramétereket a queryParams segítségével kell átadnunk az alábbiak szerint:
|
1 2 3 |
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> Termékek </a> |
Figyelje meg, hogyan adjuk át az objektumot a queryParams részére az egyirányú adatkötés használatával. Egy teljes objektumot is átadhatunk mint queryParams .
Továbbá, ha ezeket a lekérdezési paramétereket tovább szeretnénk vinni a későbbi navigáció során, használhatjuk a queryParamsHandling opciót. A queryParamsHandling lehetséges opciói a merge és preserve:
|
1 2 |
<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">Termékek</a> |
Itt láthattuk, hogyan kell átadni a queryParams paramétereket, és hogyan kell kezelni azokat a queryParamsHandling segítségével a RouterLink.
Lekérdezési paraméterek értékeinek beolvasása
Eddig megtanultuk, hogyan kell átadni a lekérdezési paramétereket az útvonalban. Ezek a paraméterek opcionálisak voltak, és arra szolgáltak, hogy információt közöljenek a céloldallal. A paraméterek elküldése csak az egyik rész, de az is szükséges, hogy kiolvassuk a paramétereket az URL-ből, és használjuk őket.
Az Angularban az útvonal lekérdezési paramétereit az ActivatedRoute osztály használatával olvassuk be. Az ActivatedRoute rendelkezik egy queryParams nevű observable tulajdonsággal az aktuális URL paramétereinek felfedéséhez.
Tegyük fel, hogy a következő URL-lel dolgozunk:
|
1 |
http://localhost:4200/products?order=popular |
A order lekérdezési paraméter eléréséhez a kódban az alábbi kódot használjuk:
|
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; }); } } |
Itt a konzolban láthatjuk az order lekérdezési paraméter értékét: “popular” kerül kinyomtatásra. Ha több lekérdezési paraméterünk van, használhatjuk a queryParamMap tulajdonságot, amely egy observable-t ad vissza paramsMap objektumot.
Ha olyan URL-ünk van, amely több lekérdezési paramétert tartalmaz, mint például:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
Ezeket a lekérdezési paramétereket az alábbi kóddal érhetjük el:
|
1 2 3 4 5 |
this.route.queryParamMap .subscribe((params) => { this.queryObj = { ...params.keys, ...params }; } ); |
Az itt használt object spread operátor segítségével az alábbi eredményt kapjuk:
|
1 2 3 4 5 6 7 8 |
{ "0": "order", "1": "filter", "params": { "order": "popular", "price": "high-to-low" } } |
Végezetül, most már értenie kell, hogyan érheti el a lekérdezési paramétereket a kapott útvonalakból.
Összegzés
Ebben az útmutatóban megvizsgáltuk a lekérdezési paraméterek és az útvonalparaméterek közötti különbséget. Megnéztük azt is, hogyan adhatunk át argumentumokat az útvonalakon keresztül lekérdezési paraméterekként, és hogyan kérhetjük le őket újra az oldalon a queryParams és queryParamsHandling használatával a Router.navigate és RouterLink segítségével. Megtanultuk azt is, hogyan kezeljük a queryParams és queryParamMap használatával a ActivatedRoute.
Az Angular alapjához JavaScript szükséges. Ha szeretné tovább bővíteni tudását a JavaScriptről, tekintse meg az alábbi blogbejegyzéseket:
- Munkavégzés JavaScripttel: Hogyan működnek az osztályok
- Munkavégzés JavaScripttel: Hogyan működnek a prototípusok és az öröklődések
- JavaScript: Útmutató a karakterláncok indexeléséhez, felosztásához és manipulálásához
Kellemes kódolást!
Hozzászólások
Még nincsenek hozzászólások. Legyen Ön az első.