Úvod
Při vytváření aplikací mohou nastat scénáře, kdy chceme předat nějaké argumenty nebo parametry popisující chování routy. V Angular, se tyto nazývají query parametry a jsou volitelné. Query parametry by se neměly zaměňovat s běžnými route parametry, které jsou povinné a jsou vázány pouze na jednu routu.
Pro vyjasnění rozdílu mezi parametry routy a query parametry si představte, že vytváříte aplikaci, která ukládá produkty. Můžete mít routu, která otevírá jakýkoli konkrétní produkt pomocí product_id. Můžete také specifikovat query parametr: read_only. Když je read_only nastaveno na true, uživatel může záznam pouze prohlížet, zatímco když je read_only je false, uživatel může záznam také upravovat. Tímto způsobem lze pomocí jediné routy obsloužit jak případ použití pro úpravu, tak pro prohlížení. Zde je product_id je parametr routy a read_only, který je volitelný, je query parametr.
Požadavky
Pro plné pochopení tohoto článku je nutná znalost vývoje aplikací v Angularu. Užitečné budou také zkušenosti s Angular Router, RouterLink a ActivatedRoute.
Předávání query parametrů pomocí Router.navigate
Pokud k navigaci mezi routami používáte Router.navigate pro přechod mezi routami, použijte queryParams k odeslání query parametrů.
Pokud v našem příkladu chceme, aby návštěvníci viděli seznam produktů seřazených podle popularity, použijeme následující kód:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular' } } ); } |
Při použití tohoto kódu bude URL vypadat takto:
|
1 |
http://localhost:4200/products?order=popular |
Mohou však nastat scénáře, kdy při navigaci potřebujeme předat více parametrů. Pokud například chceme produkty seřadit podle popularity a zároveň podle ceny, můžeme použít následující kód:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular', price: 'high-to-low' } } ); } |
Tentokrát bude URL vypadat následovně:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
Tímto máme pokryto, jak nastavit query parametry pomocí queryParams.
Zamezení ztrátě query parametrů pomocí queryParamsHandling
Při navigaci mezi routami mají parametry tendenci se ztrácet. Předpokládejme, že pokud předáme argument arg0, nebude při následném směrování předán. Parametry můžeme zachovat pomocí queryParamsHandling a nastavením hodnoty na preserve nebo merge.
Ve výše uvedeném příkladu předpokládejme, že chceme návštěvníky přesměrovat na stránku brands ze stránky product s parametrem routy { order: 'popular' }, a zároveň zachovat parametry routy. K tomu můžeme použít queryParamsHandling a nastavit jej na preserve :
|
1 2 3 4 5 6 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParamsHandling: 'preserve' } ); } |
Tím bude URL vypadat takto:
|
1 |
http://localhost:4200/users?brand=popular |
Dále řekněme, že chceme zachovat query parametr předchozí routy { order: 'popular' } a zároveň přidat nové parametry { price: 'high-to-low' }. Můžeme nastavit queryParamsHandling na merge:
|
1 2 3 4 5 6 7 8 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParams: { price: 'high-to-low' }, queryParamsHandling: 'merge' } ); } |
S výše uvedeným kódem bude URL vypadat takto:
|
1 |
http://localhost:4200/brand?order=popular&price=high-to-low |
Tímto uzavíráme zachování parametrů dotazu pomocí queryParamsHandling pro zachování nebo sloučení.
Předávání parametrů dotazu pomocí RouterLink
S ohledem na náš předchozí odkaz, pokud chceme použít RouterLink direktivu pro navigaci, budeme muset předat parametry dotazu pomocí queryParams následovně:
|
1 2 3 |
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> Produkty </a> |
Všimněte si, jak předáváme objekt do queryParams pomocí jednosměrné vazby. Jako můžeme také předat celý objektqueryParams .
Dále, pokud chceme tyto parametry dotazu přenést do následné navigace, můžeme použít volbu queryParamsHandling. Možné volby pro queryParamsHandling jsou merge a preserve:
|
1 2 |
<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">Produkty</a> |
Zde jsme viděli, jak předat queryParams a jak zpracovat parametry pomocí queryParamsHandling v RouterLink.
Čtení hodnot parametrů dotazu
Až dosud jsme se naučili, jak předávat parametry dotazu v routě. Tyto parametry byly volitelné a sloužily k předání informací cílové stránce. Odeslání parametrů je jedna věc, ale je také nutné tyto parametry z URL přečíst a použít.
V Angularu čteme parametry dotazu routy pomocí třídy ActivatedRoute. Třída ActivatedRoute má observable vlastnost s názvem queryParams pro získání parametrů aktuální URL.
Předpokládejme, že pracujeme s následující URL:
|
1 |
http://localhost:4200/products?order=popular |
Pro přístup k parametru dotazu order v kódu použijeme následující 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; }); } } |
Zde v konzoli uvidíme hodnotu parametru dotazu order s hodnotou “popular” vypsány. Pokud máme více parametrů dotazu, můžeme použít queryParamMap vlastnost, která vrací observable paramsMap objekt.
Pokud máme URL s více parametry dotazu, jako například:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
K těmto parametrům dotazu můžeme přistupovat pomocí níže uvedeného kódu:
|
1 2 3 4 5 |
this.route.queryParamMap .subscribe((params) => { this.queryObj = { ...params.keys, ...params }; } ); |
Použitím operátoru spread pro objekty zde získáme níže uvedený výsledek:
|
1 2 3 4 5 6 7 8 |
{ "0": "order", "1": "filter", "params": { "order": "popular", "price": "high-to-low" } } |
Na závěr byste měli rozumět tomu, jak přistupovat k parametrům dotazu z výsledných tras.
Conclusion
V tomto návodu jsme se podívali na rozdíl mezi parametry dotazu (query parameters) a parametry trasy (route parameters). Také jsme se podívali na to, jak předávat argumenty napříč trasami jako parametry dotazu a jak je získat zpět na stránce pomocí queryParams a queryParamsHandling s Router.navigate a RouterLink. Také jsme se naučili, jak zacházet s queryParams a queryParamMap s ActivatedRoute.
Angular vyžaduje ve svém základu JavaScript. Pokud si chcete rozšířit své znalosti o JavaScriptu, můžete se podívat na následující blogy:
- Práce s JavaScriptem: Jak fungují třídy
- Práce s JavaScriptem: Jak fungují prototypy a dědičnost
- JavaScript: Návod, jak indexovat, rozdělovat a manipulovat s řetězci
Přejeme příjemné programování!
Komentáře
Zatím žádné komentáře. Buďte první.