Introduzione
Angular le applicazioni sono molto comuni al giorno d'oggi. Sono costruite con il concetto di Single Page Applications (SPA). In tali applicazioni, il routing tra le pagine web è diverso rispetto ai siti web tradizionali poiché vengono utilizzati i componenti. In Angular, è necessario utilizzare RouterLink per la navigazione per instradare l'applicazione. RouterLink è una direttiva e fornisce Router.navigate e Router.navigateByURL metodi per navigare tra le classi dei componenti.
In questo tutorial, esamineremo RouterLink, Router.navigate, e Router.navigateByURL insieme a codice di esempio.
RouterLink
In HTML un collegamento viene normalmente inserito utilizzando un tag di ancoraggio <a> come di seguito:
|
1 2 3 |
<a href="/sample"> Esempio di link HTML. </a> |
Questo link di esempio reindirizzerà l'utente alla pagina /sample . Tuttavia, come menzionato sopra, un'applicazione a pagina singola (SPA) non ha pagine diverse a cui collegarsi. Al contrario, ha diverse viste o componenti da mostrare all'utente.
Se hai bisogno di consentire a un utente di navigare e cambiare la vista, dovrai utilizzare la direttiva RouterLink invece di href:
|
1 2 3 |
<a routerLink="/users/example"> Link che utilizza una stringa. </a> |
Questo RouterLink esempio condurrà l'utente al componente in /users/example. I diversi segmenti dell'URL possono anche essere passati in un array come nel seguente esempio:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Un esempio di un link con un array. </a> |
Questi due esempi sono formattati in modo diverso, ma indirizzeranno comunque allo stesso componente in /users/example.
-
Percorso relativo
RouterLink consente di specificare gli URL relativi. Possiamo usare ../ per salire ai livelli superiori di navigazione. Di seguito è riportato come possiamo ottenere questo risultato:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Link che sale di un livello. </a> |
Nell'esempio sopra, se l'utente si trova in /users/posts, la navigazione porterà l'utente a /posts/parent. È anche possibile specificare gli URL in modo relativo utilizzando ./, ../, o anche senza barra iniziale se necessario.
-
Parametri
Potrebbero esserci scenari in cui è necessario passare i dati tra le rotte. Un semplice esempio è quando l'utente compila il modulo e lo porti alla parte successiva del modulo per ulteriori dettagli.
Per passare i parametri, viene passato un oggetto che incapsula i dati nell'elenco dei segmenti URL:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Link con parametro. </a> |
Sopra, il Router navigherà verso /users;display=sample/xyz.
-
Outlet con nome
I router outlet con nome sono semplicemente router outlet dotati di nome. Diamo un'occhiata al codice per questo:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Link con un outlet laterale. </a> |
In questo esempio, il segmento xyz verrà posizionato nell'outlet chiamato side. Possiamo anche specificare più outlet con nome come di seguito:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Link con il primo e il secondo outlet. </a> |
Questo sostituirà il segmento first con abc e il segmento second viene sostituito con xyz.
Router
In Angular, il Router la classe viene utilizzata per definire le rotte e per navigare attraverso di esse. Questo si ottiene tramite due metodi: Router.navigate e Router.navigateByUrl. Entrambi questi metodi restituiscono una promise. Questa promise può avere tre valori: true, false, o null.
-
Il valore è true quando la navigazione va a buon fine.
-
Il valore è null quando non c'è navigazione.
-
E false se per qualche motivo la navigazione fallisce.
Se desideri avere questi metodi disponibili nella tua applicazione, devi prima importare la classe Router nella classe del tuo componente:
|
1 |
import { Router } from '@angular/router'; |
Successivamente, devi iniettare questo Router nel costruttore alle dipendenze:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
Con questa configurazione, sei pronto a utilizzare i metodi Router.navigate e Router.navigateByUrl nella tua applicazione.
Router.navigate
Il metodo Router.navigate accetta un array di segmenti URL. Diamo un'occhiata a un esempio di base di codice Router.navigate:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Infine, diamo un'occhiata a Router.navigateByUrl. Questo metodo è simile a Router.navigate ma invece di accettare segmenti URL, accetta una stringa che specifica l'URL. Questa navigazione deve essere assoluta e deve avere / all'inizio:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
Il codice sopra reindirizzerà l'utente alla pagina /users;all=true.
Conclusione
In questo tutorial, abbiamo visto come navigare nelle app Angular utilizzando RouterLink. Il routing nelle app Angular è leggermente diverso rispetto alle tradizionali applicazioni web a causa della loro natura Single-Page. Conoscere RouterLink e le sue funzioni può aiutare gli sviluppatori a creare un routing robusto.
Le app Angular utilizzano Node.js come runtime. Se vuoi saperne di più su Node.js e su come distribuire le applicazioni Node.js, puoi dare un'occhiata ai seguenti tutorial:
- Come installare Node.js su Ubuntu 18.04
- Configurazione delle applicazioni Node.js: come eseguire attività di produzione su Ubuntu 20.04 con Node.js
- Come distribuire un'app Node.js (Express.js) con Docker su Ubuntu 20.04
Buona programmazione!
Commenti
Ancora nessun commento. Scrivi il primo.