Liens pour le routage dans Angular

Dans les leçons précédentes, nous saisissions l'URL dans la barre d'adresse manuellement. Créons maintenant des liens dont la navigation affichera divers composants.

Pour cela, nous allons créer des liens d'une manière spéciale. Le fait est que nous n'avons pas besoin d'une véritable navigation par liens. Nous voulons simplement qu'Angular affiche un autre composant, change l'URL dans la barre d'adresse du navigateur et ne rafraîchisse pas la page.

Par conséquent, au lieu de l'attribut natif href nous utiliserons l'attribut d'Angular RouterLink.

Pour cela, nous devons l'importer :

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

Le déclarer dans le décorateur :

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

Maintenant nous pouvons créer nos liens :

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

Créez des liens permettant de basculer entre vos composants.