Retour au cours

Naviguer de manière programmatique et déclarative (routerLink)

Le Développeur Angular Complet : de Zéro à Héros

33. Naviguer de manière programmatique et déclarative

Angular propose deux moyens principaux pour gérer la navigation :

  1. Déclaratif : Utilisation de la directive routerLink dans le template (liens standards).
  2. Programmatique : Utilisation du service Router dans la classe du composant (déclenché par la logique).

1. Navigation déclarative (routerLink)

La directive routerLink remplace l'attribut standard href sur les balises d'ancrage.

html

<nav> <a routerLink="/">Accueil</a> | <a routerLink="/about">À propos</a> | <!-- RouterLink supporte la syntaxe de tableau pour les chemins à segments -->

<a [routerLink]="['/users', 10]">Utilisateur 10</a>

</nav>

2. Navigation programmatique (Service Router)

Nous injectons le service Router dans le constructeur du composant ou du service. On l'utilise lorsque la navigation est conditionnelle (ex : après une connexion réussie ou la soumission d'un formulaire).

typescript import { Router } from '@angular/router';

export class LoginComponent {

constructor(private router: Router) { }

handleLogin() { // Simulation d'une authentification réussie const success = true;

if (success) {
  // Navigation vers le chemin dashboard
  this.router.navigate(['/dashboard']); 
  
  // Pour naviguer au niveau supérieur :
  // this.router.navigate(['../'], { relativeTo: this.route });
} else {
  alert('Échec de la connexion !');
}

} }

Router Link Active (routerLinkActive)

Pour mettre en évidence le lien actuellement actif (ex : en ajoutant une classe CSS), utilisez routerLinkActive.

html <a routerLink="/about" routerLinkActive="active-link">À propos</a>