Pubblicato il 06/01/2024 da alnao nella categoria Angular & Ionic

In tutte le applicazioni web di tipo single-page il tema della navigazione tra componenti è un aspetto che deve sempre essere analizzato attentamente: la applicazione deve impostare quali “rotte” sono associate ai componenti. Il framework Angular ha in sistema di gestione della navigazione tra componenti detto routing che viene configurato alla creazione di un progetto e si basa sulla tecnica dichiarativa: nella classe di configurazione dell’applicazione si deve finire un “provider di rotte” e questo elenco deve essere importato nella classe che dichiara il modulo o nella classe globale dell’applicazione:

@NgModule({
  imports: [
    BrowserModule, FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  ...

Nel file principale dell’applicazione il componente principale deve essere sostituito dal tag:

<router-outlet></router-outlet>

e le rotte vengono definite come elenco in un file specifico:

import { Routes } from '@angular/router';
const appRoutes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '', redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
  { path: '**', component: PageNotFoundComponent }, // route for a 404 page
];

La documentazione ufficiale descrive in maniera chiara e completa tutte le proprietà possibili messe a disposizione del framework per la definizione delle rotte e del loro comportamento. Per la navigazione tra componenti è possibile usare i classici tag link di HTML con riferimento alle rotte definite:

<nav>
  <a class="button" routerLink="/first-component">First</a> |
  <a class="button" routerLink="/second-component">Second</a>
</nav>

Il comportamento delle rotte possono essere personalizzate, come descritto nella guida ufficiale, la tecnica più usata è la definizione rotte parametriche come descritto nel sito ufficiale: questa tecnica permette di creare rotte legate a componenti che necessitano di parametri, il classico esempio è un componente che visualizza il dettaglio di un elemento che necessita l’identificato dell’elemento da visualizzare, la rotta deve essere definita:

const heroesRoutes: Routes = [
  { path: 'heroes', component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];

Usando questa tecnica, la rotta creata dal framework sarà del tipo:

localhost:4200/hero/15

Nel componente è possibile recuperare il valore del parametro da un oggetto contenente la mappa dei parametri, componente messo a disposizione dal framework del tipo ActivatedRoute e iniettabile nel costruttore del componente come fosse un servizio:

constructor(private route: ActivatedRoute,private router: Router) {}
ngOnInit() {
  this.hero$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
    this.setParametro(params.get('id')!))
  );
}

Si rimanda alla documentazione ufficiale per maggior in formazioni sul concetto di mappa dei parametri.


Per la gestione delle rotte nei componenti, è possibile creare collegamenti alle rotte parametriche impostando dinamicamente i valori, per esempio:

<a [routerLink]="['/hero', hero.id]">

In alternativamente è possibile gestire il routing anche nel codice typescript dei componenti grazie alla classe Router:

gotoHeroes(heroId) { //this.router.navigate(['/heroes']);
  this.router.navigate(['/hero', { id: heroId }]);
}

Esistono molte altre possibilità nell’uso delle rotte come la gestione asincrona della navigazione e la gestione delle autorizzazioni degli utenti in fase di navigazione, in futuri articoli alcuni di questi argomenti saranno approfonditi ma si rimanda sempre al sito ufficiale come fonte principale di informazioni, si consiglia anche di analizzare l’esempio live funzionante che racchiude esempi di tutte queste tecniche.

MENU