Úvod
Pri vytváraní aplikácií môžu nastať scenáre, kedy chceme odovzdať nejaké argumenty alebo parametre na opísanie správania trasy. V Angular, sa tieto nazývajú query parametre a sú voliteľné. Query parametre by sa nemali zamieňať s bežnými route parametrami, ktoré sú povinné a viažu sa len na jednu trasu.
Aby sme si ujasnili rozdiel medzi route parametrami a query parametrami, predstavte si, že vyvíjate aplikáciu, ktorá ukladá produkty. Môžete mať trasu, ktorá otvorí konkrétny produkt pomocou product_id. Môžete tiež špecifikovať query parameter: read_only. Keď je read_only nastavené na true, používateľ si môže záznam iba prezerať, zatiaľ čo keď je read_only je false, používateľ môže záznam aj upravovať. Týmto spôsobom je možné pomocou jedinej trasy vyriešiť prípady použitia na úpravu aj zobrazenie. Tu je product_id je route parameter a read_only, ktorý je voliteľný, je query parameter.
Požiadavky
Na úplné pochopenie tohto článku je potrebná znalosť tvorby aplikácií v systéme Angular. Užitočné budú aj skúsenosti s Angular Router, RouterLink a ActivatedRoute.
Odovzdávanie query parametrov pomocou Router.navigate
Ak na navigáciu medzi trasami používate Router.navigate, použite queryParams na odoslanie query parametrov.
Ak v príklade vyššie chceme, aby návštevníci videli zoznam produktov zoradených podľa popularity, použijeme nasledujúci kód:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular' } } ); } |
Pri použití tohto kódu bude URL vyzerať takto:
|
1 |
http://localhost:4200/products?order=popular |
Môžu však nastať scenáre, kedy pri navigácii potrebujeme odovzdať viacero parametrov. Napríklad, ak chceme produkty zoradiť podľa popularity a zároveň podľa ceny, môžeme použiť nasledujúci kód:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular', price: 'high-to-low' } } ); } |
Tentokrát bude URL vyzerať nasledovne:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
Týmto sme si ukázali, ako nastaviť query parametre pomocou queryParams.
Zabránenie strate query parametrov pomocou queryParamsHandling
Pri navigácii medzi trasami majú parametre tendenciu sa stratiť. Predpokladajme, že ak odovzdáme argument arg0, pri následnom smerovaní sa neodovzdá. Parametre môžeme zachovať pomocou queryParamsHandling a nastavením hodnoty na preserve alebo merge.
Vo vyššie uvedenom príklade predpokladajme, že chceme návštevníkov presmerovať na stránku brands zo stránky product s route parametrom { order: 'popular' }, pričom zachováme parametre trasy. Na tento účel môžeme použiť queryParamsHandling a nastaviť ho na preserve :
|
1 2 3 4 5 6 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParamsHandling: 'preserve' } ); } |
Týmto bude URL vyzerať nasledovne:
|
1 |
http://localhost:4200/users?brand=popular |
Ďalej predpokladajme, že chceme zachovať query parameter predchádzajúcej trasy { order: 'popular' } a zároveň pridať nové parametre { price: 'high-to-low' }. Môžeme nastaviť queryParamsHandling na merge:
|
1 2 3 4 5 6 7 8 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParams: { price: 'high-to-low' }, queryParamsHandling: 'merge' } ); } |
S vyššie uvedeným kódom bude URL adresa nasledovná:
|
1 |
http://localhost:4200/brand?order=popular&price=high-to-low |
Tu končíme zachovanie parametrov dopytu pomocou queryParamsHandling na zachovanie alebo zlúčenie.
Odovzdávanie parametrov dopytu pomocou RouterLink
Ak vezmeme do úvahy náš predchádzajúci odkaz, ak chceme použiť RouterLink direktívu na navigáciu, budeme musieť odovzdať parametre dopytu pomocou queryParams nasledovne:
|
1 2 3 |
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> Produkty </a> |
Všimnite si, ako odovzdávame objekt do queryParams pomocou jednosmernej väzby. Môžeme tiež odovzdať celý objekt ako queryParams .
Okrem toho, ak chceme tieto parametre dopytu preniesť do ďalšej navigácie, môžeme použiť možnosť queryParamsHandling . Možné možnosti pre queryParamsHandling sú merge a preserve:
|
1 2 |
<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">Produkty</a> |
Tu sme videli, ako odovzdať queryParams a spracovať parametre pomocou queryParamsHandling v RouterLink.
Čítanie hodnôt parametrov dopytu
Doteraz sme sa naučili, ako odovzdávať parametre dopytu v smerovaní. Tieto parametre boli voliteľné a slúžili na prenos informácií na cieľovú stránku. Odoslanie parametrov je jedna časť, ale je tiež potrebné tieto parametre z URL adresy prečítať a použiť ich.
V Angular čítame parametre dopytu smerovania pomocou triedy ActivatedRoute . Trieda ActivatedRoute má sledovateľnú vlastnosť s názvom queryParams na zobrazenie parametrov aktuálnej URL adresy.
Predpokladajme, že pracujeme s nasledujúcou URL adresou:
|
1 |
http://localhost:4200/products?order=popular |
Pre prístup k parametru dopytu order v kóde použijeme nasledujúci kód:
|
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; }); } } |
Tu v konzole uvidíme hodnotu order parametra dopytu, ktorou je “popular” vypísané. Ak máme viacero parametrov dopytu, môžeme použiť queryParamMap vlastnosť, ktorá vracia observable paramsMap objekt.
Ak máme URL s viacerými parametrami dopytu ako:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
K týmto parametrom dopytu môžeme pristupovať pomocou nižšie uvedeného kódu:
|
1 2 3 4 5 |
this.route.queryParamMap .subscribe((params) => { this.queryObj = { ...params.keys, ...params }; } ); |
Použitím operátora rozvinutia objektu tu získame nižšie uvedený výsledok:
|
1 2 3 4 5 6 7 8 |
{ "0": "order", "1": "filter", "params": { "order": "popular", "price": "high-to-low" } } |
Na záver by ste mali rozumieť tomu, ako pristupovať k parametrom dopytu z výsledných smerovaní.
Záver
V tomto návode sme sa pozreli na rozdiel medzi parametrami dopytu a parametrami smerovania. Pozreli sme sa tiež na to, ako odovzdávať argumenty naprieč smerovaniami ako parametre dopytu a tiež ako ich získať späť na stránke pomocou queryParams a queryParamsHandling s Router.navigate a RouterLink. Tiež sme sa naučili, ako spracovávať queryParams a queryParamMap s ActivatedRoute.
Angular vo svojom základe vyžaduje JavaScript. Ak si chcete rozšíriť svoje znalosti o JavaScripte, môžete si pozrieť nasledujúce blogy:
- Práca s JavaScriptom: Ako fungujú triedy
- Práca s JavaScriptom: Ako fungujú prototypy a dedičnosť
- JavaScript: Návod, ako indexovať, rozdeľovať a manipulovať s reťazcami
Príjemné programovanie!
Komentáre
Zatiaľ žiadne komentáre. Buďte prvý.