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

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 À propos