Bevezetés
Angular alkalmazások manapság nagyon elterjedtek. A egyoldalas alkalmazások (SPA) koncepciójára épülnek. Az ilyen alkalmazásokban a weboldalak közötti útvonalválasztás (routing) eltér a hagyományos weboldalakétól, mivel komponenseket használunk. Az Angularban a RouterLink irányelvet kell használni az alkalmazáson belüli navigációhoz. A RouterLink egy direktíva, és a Router.navigate és Router.navigateByURL metódusokat biztosítja a komponensosztályok közötti navigációhoz.
Ebben az útmutatóban a következőket fogjuk megvizsgálni: RouterLink, Router.navigate, és Router.navigateByURL kód példákkal együtt.
RouterLink
HTML-ben a linkeket általában egy horgony (anchor) tag segítségével szúrjuk be <a> az alábbiak szerint:
|
1 2 3 |
<a href="/sample"> Példa HTML link. </a> |
Ez a példalink a felhasználót a /sample oldalra irányítja. Azonban, mint fentebb említettük, egy egyoldalas alkalmazásnak (SPA) nincsenek különböző oldalai, amikre linkelni lehetne. Ehelyett különböző nézetei vagy komponensei vannak, amelyeket megjelenít a felhasználónak.
Ha lehetővé szeretné tenni a felhasználó számára a navigációt és a nézet megváltoztatását, a RouterLink direktívát kell használnia a href:
|
1 2 3 |
<a routerLink="/users/example"> Karakterláncot használó link. </a> |
Ez a RouterLink példa a felhasználót a /users/example helyen található komponenshez vezeti. A különböző URL-szegmensek tömbben is átadhatók, mint az alábbi példában:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Egy példa egy tömb öt tartalmazó linkre. </a> |
Ez a két példa eltérő módon van formázva, de továbbra is ugyanarra a komponensre mutat a /users/example.
-
Relatív útvonal
A RouterLink lehetővé teszi a relatív URL-ek megadását. Használhatjuk a ../ karaktereket a navigáció magasabb szintjeire való visszalépéshez. Az alábbiakban látható, hogyan érhetjük el ezt:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Egy szinttel feljebb lépő link. </a> |
A fenti példában, ha a felhasználó a /users/posts helyen van, a navigáció a /posts/parent helyre viszi. Az URL-eket relatívan is megadhatja a ./, ../ használatával, vagy akár kezdő perjel nélkül is, ha szükséges.
-
Paraméterek
Előfordulhatnak olyan esetek, amikor adatokat kell átadnia az útvonalak között. Egyszerű példa erre, amikor a felhasználó kitölt egy űrlapot, és Ön az űrlap következő részére irányítja a további részletekért.
A paraméterek átadásához az adatokat magában foglaló objektumot kell átadni az URL-szegmensek listájában:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Paraméterrel rendelkező link. </a> |
Fent a Router a következő helyre navigál: /users;display=sample/xyz.
-
Nevesített outletek
A nevesített router outletek egyszerűen névvel ellátott router outletek. Nézzük meg az ehhez tartozó kódot:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Oldalsó outlettel rendelkező link. </a> |
Ebben a példában a xyz szegmens a side nevű outletbe kerül. Több nevesített outletet is megadhatunk az alábbiak szerint:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Az első és második outlettel rendelkező link. </a> |
Ez lecseréli a first szegmenst a következővel: abc és a second szegmenst a következővel helyettesíti: xyz.
Router
Az Angularban a Router osztály az útvonalak meghatározására és az azokon való navigálásra szolgál. Ez két metódussal érhető el: Router.navigate és Router.navigateByUrl. Mindkét metódus egy promise-t ad vissza. Ez a promise három értéket vehet fel: true, false, vagy null.
-
Az érték true sikeres navigáció esetén.
-
Az érték null ha nincs navigáció.
-
És false ha a navigáció valamilyen okból meghiúsul.
Ha szeretné, hogy ezek a metódusok elérhetőek legyenek az alkalmazásában, először importálnia kell a Router osztályt a komponens osztályában:
|
1 |
import { Router } from '@angular/router'; |
Ezután be kell injektálnia ezt a Router osztályt a konstruktorban a függőségek közé:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
Ezzel a beállítással készen áll a Router.navigate és Router.navigateByUrl metódusok használatára az alkalmazásában.
Router.navigate
A Router.navigate metódus URL-szegmensek tömbjét fogadja el. Nézzünk egy egyszerű példát a Router.navigate kódra:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Végezetül nézzük meg a Router.navigateByUrl metódust. Ez a metódus hasonló a Router.navigate metódushoz, de az URL-szegmensek helyett egy karakterláncot fogad el, amely megadja az URL-t. Ennek a navigációnak abszolútnak kell lennie, és tartalmaznia kell a / jelet az elején:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
A fenti kód a felhasználót a /users;all=true oldalra fogja navigálni.
Conclusion
Ebben az útmutatóban áttekintettük, hogyan navigálhatunk az Angular alkalmazásokban a RouterLink segítségével. Az Angular alkalmazásokban az útvonalválasztás (routing) kissé eltér a hagyományos webalkalmazásokétól, mivel ezek egyoldalasak (Single-Page). A RouterLink és funkcióinak ismerete segíthet a fejlesztőknek robusztus útvonalválasztás kiépítésében.
Az Angular alkalmazások a Node.js környezetet használják futtatókörnyezetként. Ha szeretne többet megtudni a Node.js-ről és a Node.js alkalmazások telepítéséről, tekintse meg az alábbi útmutatókat:
- Hogyan telepítsük a Node.js-t Ubuntu 18.04-re
- Node.js alkalmazások beállítása: Hogyan végezzünk éles üzemű feladatokat Ubuntu 20.04-en Node.js segítségével
- Hogyan telepítsünk egy Node.js (Express.js) alkalmazást Dockerrel Ubuntu 20.04-en
Kellemes kódolást!
Hozzászólások
Még nincsenek hozzászólások. Legyen Ön az első.