Úvod
Angular aplikácie sú v dnešnej dobe veľmi bežné. Sú postavené na koncepte jednostránkových aplikácií (SPA). V takýchto aplikáciách je smerovanie (routing) naprieč webovými stránkami odlišné od tradičných webov, keďže sa používajú komponenty. V Angular musíte použiť RouterLink na navigáciu a smerovanie naprieč aplikáciou. RouterLink je direktíva a poskytuje Router.navigate a Router.navigateByURL metódy na navigáciu naprieč triedami komponentov.
V tomto návode sa budeme zaoberať RouterLink, Router.navigate, a Router.navigateByURL spolu s kódovými príkladmi.
RouterLink
V HTML sa odkaz zvyčajne vkladá pomocou značky kotvy (anchor tag) <a> ako je uvedené nižšie:
|
1 2 3 |
<a href="/sample"> Príklad HTML odkazu. </a> |
Tento ukážkový odkaz presmeruje používateľa na /sample stránku. Ako však už bolo spomenuté vyššie, jednostránková aplikácia (SPA) nemá rôzne stránky, na ktoré by sa dalo odkazovať. Namiesto toho má rôzne zobrazenia alebo komponenty, ktoré sa zobrazujú používateľovi.
Ak potrebujete používateľovi umožniť navigáciu a zmenu zobrazenia, budete musieť namiesto RouterLink direktívy použiť href:
|
1 2 3 |
<a routerLink="/users/example"> Odkaz, ktorý používa reťazec. </a> |
Tento RouterLink príklad zavedie používateľa na komponent na adrese /users/example. Rôzne segmenty URL môžu byť tiež odovzdané v poli, ako v nasledujúcom príklade:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Príklad odkazu s a poľomwith an array. </a> |
Tieto dva príklady sú formátované iným spôsobom, ale stále budú smerovať na rovnaký komponent na adrese /users/example.
-
Relatívna cesta
RouterLink umožňuje špecifikovať relatívne URL adresy. Môžeme použiť ../ na prechod na vyššie úrovne navigácie. Nižšie je uvedené, ako to môžeme dosiahnuť:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Odkaz, ktorý ide o úroveň vyššie. </a> |
V príklade vyššie, ak sa používateľ nachádza na /users/posts, navigácia zavedie používateľa na /posts/parent. Relatívne URL môžete špecifikovať aj pomocou ./, ../, alebo dokonca bez úvodnej lomky, ak je to potrebné.
-
Parametre
Môžu nastať scenáre, kedy potrebujete preniesť dáta medzi trasami (routes). Jednoduchým príkladom je, keď používateľ vyplní formulár a vy ho presmerujete na ďalšiu časť formulára pre ďalšie podrobnosti.
Na odovzdanie parametrov sa v zozname segmentov URL odovzdá objekt zapuzdrujúci dáta:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Odkaz s parametrom. </a> |
Vyššie, Router prejde na /users;display=sample/xyz.
-
Pomenované outlety
Pomenované router outlety sú jednoducho router outlety s názvami. Pozrime sa na kód pre tento prípad:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Odkaz s bočným outletom. </a> |
V tomto príklade bude segment xyz umiestnený v outlete s názvom side. Môžeme tiež špecifikovať viacero pomenovaných outletov, ako je uvedené nižšie:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Odkaz s prvým a druhým outletom. </a> |
Týmto sa nahradí segment first segmentom abc a segment second sa nahradí segmentom xyz.
Router
V Angular, Router trieda sa používa na definovanie trás a na navigáciu po nich. To sa dosahuje dvoma metódami: Router.navigate a Router.navigateByUrl. Obe tieto metódy vracajú promise. Tento promise môže mať tri hodnoty: true, false, alebo null.
-
Hodnota je true keď je navigácia úspešná.
-
Hodnota je null keď neprebieha žiadna navigácia.
-
A false ak navigácia z nejakého dôvodu zlyhá.
Ak chcete mať tieto metódy k dispozícii vo svojej aplikácii, musíte najprv importovať triedu Router vo vašej triede komponentu:
|
1 |
import { Router } from '@angular/router'; |
Ďalej musíte tento Router injektovať v konštruktore do závislostí:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
S týmto nastavením ste pripravení používať metódy Router.navigate a Router.navigateByUrl vo vašej aplikácii.
Router.navigate
Metóda Router.navigate prijíma pole segmentov URL. Pozrime sa na základný príklad kódu Router.navigate:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Na záver sa pozrime na Router.navigateByUrl. Táto metóda je podobná Router.navigate, ale namiesto prijímania segmentov URL prijíma reťazec, ktorý špecifikuje URL. Táto navigácia musí byť absolútna a musí mať / na svojom začiatku:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
Vyššie uvedený kód presmeruje používateľa na stránku /users;all=true.
Záver
V tomto návode sme sa pozreli na to, ako navigovať v aplikáciách Angular pomocou RouterLink. Smerovanie (routing) v aplikáciách Angular je trochu odlišné od tradičných webových aplikácií, pretože ide o jednostránkové aplikácie (Single-Page). Znalosť RouterLink a jeho funkcií môže vývojárom pomôcť vybudovať robustné smerovanie.
Aplikácie Angular používajú Node.js ako svoje runtime prostredie. Ak sa chcete dozvedieť viac o Node.js a o tom, ako nasadzovať aplikácie Node.js, môžete si pozrieť nasledujúce návody:
- Ako nainštalovať Node.js na Ubuntu 18.04
- Nastavenie aplikácií Node.js: Ako vykonávať produkčné úlohy na Ubuntu 20.04 s Node.js
- Ako nasadiť aplikáciu Node.js (Express.js) pomocou Dockeru na Ubuntu 20.04
Príjemné programovanie!
Komentáre
Zatiaľ žiadne komentáre. Buďte prvý.