Link per il routing in Angular

Nelle lezioni precedenti abbiamo inserito l'URL manualmente nella barra degli indirizzi. Creiamo ora dei link che, quando cliccati, mostreranno diversi componenti.

Per fare ciò, creeremo i link in un modo speciale. Il fatto è che non abbiamo bisogno di un vero e proprio cambio di pagina al click dei link. Vogliamo semplicemente che Angular mostri un altro componente, cambi l'URL nella barra degli indirizzi del browser e, allo stesso tempo, non ricarichi la pagina.

Quindi, invece dell'attributo nativo href useremo l'attributo di Angular RouterLink.

Per fare questo dobbiamo importarlo:

import { RouterLink } from '@angular/router';

Dichiararlo nel decoratore:

@Component({
	......
	imports: [RouterOutlet, RouterLink],
	......
})

Ora possiamo creare i nostri link:

<nav>
	<a routerLink="/aaaa/">
		Aaaa
	</a>
	<a routerLink="/bbbb/">
		Bbbb
	</a>
</nav>

Crea dei link che commutino i tuoi componenti.