Úvod
Angular aplikace jsou v dnešní době velmi běžné. Jsou postaveny na konceptu Single Page Applications (SPA). V těchto aplikacích se směrování napříč webovými stránkami liší od tradičních webů, protože se používají komponenty. V Angularu musíte použít RouterLink pro navigaci a směrování napříč aplikací. RouterLink je direktiva a poskytuje Router.navigate a Router.navigateByURL metody pro navigaci napříč třídami komponent.
V tomto návodu se podíváme na RouterLink, Router.navigate, a Router.navigateByURL společně s ukázkami kódu.
RouterLink
V HTML se odkaz obvykle vkládá pomocí značky kotvy <a> jako níže:
|
1 2 3 |
<a href="/sample"> Příklad HTML odkazu. </a> |
Tento ukázkový odkaz přesměruje uživatele na /sample stránku. Jak však bylo zmíněno výše, jednostránková aplikace (SPA) nemá různé stránky, na které by se dalo odkazovat. Místo toho má různé pohledy nebo komponenty, které se uživateli zobrazují.
Pokud potřebujete uživateli umožnit navigaci a změnu pohledu, budete muset použít RouterLink direktivu namísto href:
|
1 2 3 |
<a routerLink="/users/example"> Odkaz, který používá řetězec. </a> |
Tento RouterLink příklad zavede uživatele ke komponentě na /users/example. Různé segmenty URL lze také předat v poli, jako v následujícím příkladu:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Příklad odkazu s polem link with an array. </a> |
Tyto dva příklady jsou formátovány odlišným způsobem, ale stále budou směřovat na stejnou komponentu na /users/example.
-
Relativní cesta
RouterLink umožňuje specifikovat relativní URL. Můžeme použít ../ pro přechod na vyšší úrovně navigace. Níže je ukázáno, jak toho můžeme dosáhnout:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Odkaz, který jde o úroveň výš. </a> |
Ve výše uvedeném příkladu platí, že pokud je uživatel na /users/posts, navigace uživatele zavede na /posts/parent. URL můžete také specifikovat relativně pomocí ./, ../, nebo v případě potřeby i bez úvodního lomítka.
-
Parametry
Mohou nastat situace, kdy potřebujete předat data mezi trasami. Jednoduchým příblem je, když uživatel vyplní formulář a vy ho přejdete na další část formuláře pro další podrobnosti.
Pro předání parametrů se v seznamu segmentů URL předá objekt zapouzdřující data:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Odkaz s parametrem. </a> |
Výše uvedený Router přejde na /users;display=sample/xyz.
-
Pojmenované outlety
Pojmenované router outlety jsou jednoduše router outlety s názvy. Podívejme se na kód pro tento případ:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Odkaz s bočním outletem. </a> |
V tomto příkladu bude segment xyz umístěn v outletu s názvem side. Můžeme také specifikovat více pojmenovaných outletů jako níže:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Odkaz s prvním a druhým outletem. </a> |
Tím se nahradí segment first segmentem abc a segment second je nahrazen segmentem xyz.
Router
V Angularu je Router třída se používá k definování tras a k navigaci mezi nimi. Toho se dosahuje dvěma metodami: Router.navigate a Router.navigateByUrl. Obě tyto metody vrací Promise. Tato Promise může mít tři hodnoty: true, false, nebo null.
-
Hodnota je true, pokud je navigace úspěšná.
-
Hodnota je null, pokud neprobíhá žádná navigace.
-
A false, pokud navigace z nějakého důvodu selže.
Pokud chcete mít tyto metody ve své aplikaci k dispozici, musíte nejprve importovat třídu Router do třídy své komponenty:
|
1 |
import { Router } from '@angular/router'; |
Dále musíte tento Router vložit v konstruktoru 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 jste připraveni použít metody Router.navigate a Router.navigateByUrl ve vaší aplikaci.
Router.navigate
Metoda Router.navigate přijímá pole segmentů URL. Podívejme se na základní příklad kódu Router.navigate:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Nakonec se podívejme na Router.navigateByUrl. Tato metoda je podobná Router.navigate, ale místo přijímání segmentů URL přijímá řetězec, který specifikuje URL. Tato navigace musí být absolutní a musí mít / na svém začátku:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
Výše uvedený kód přesměruje uživatele na stránku /users;all=true.
Závěr
V tomto návodu jsme se podívali na to, jak navigovat v aplikacích Angular pomocí RouterLink. Směrování (routing) v aplikacích Angular je trochu odlišné od tradičních webových aplikací, protože se jedná o jednostránkové aplikace (Single-Page). Znalost RouterLink a jeho funkcí může vývojářům pomoci vytvářet robustní směrování.
Aplikace v Angularu používají Node.js jako své běhové prostředí. Pokud se chcete dozvědět více o Node.js a o tom, jak nasazovat aplikace Node.js, můžete se podívat na následující návody:
- Jak nainstalovat Node.js na Ubuntu 18.04
- Nastavení aplikací Node.js: Jak provádět produkční úkoly na Ubuntu 20.04 s Node.js
- Jak nasadit aplikaci Node.js (Express.js) pomocí Dockeru na Ubuntu 20.04
Přejeme příjemnou práci s počítačem!
Komentáře
Zatím žádné komentáře. Buďte první.