15-4 Lien routerLink dynamique
On voudra évidemment faire un lien de la page d'accueil vers la page de détail d'un projet. Cependant, ce lien n'est pas statique, il est différent pour chaque projet!
Il est possible de construire un chemin dynamiquement via routerLink en lui passant un tableau de paramètres.
Par exemple, si on voulait, sur la page de liste de projets, ajouter un lien sur le titre du projet pour accéder à la page de détail de ce dernier, on fait (voir la ligne en surbrillance):
@Component({
selector: 'app-projets-liste',
imports: [
RouterLink
],
template: `
<a class="btn btn-primary" routerLink="/projets/creer">Nouveau projet</a>
@if(projets && projets.length > 0){
<ul>
@for (projet of projets; track $index) {
<li>
<a [routerLink]="['/projets', projet.id]">{{ projet.nom }}</a>
<button (click)="supprimerProjet(projet.id)" class="btn btn-link text-danger btn-sm">Supprimer</button>
</li>
} @empty {
<li>Aucun projet</li>
}
</ul>
} @else {
<p>Aucun projet</p>
}
`,
//...
L'utilisation de [] autour de [routerLink] a pour effet de traiter la partie de droite comme une expression dynamique (du code à interpréter) plutôt qu'une chaine de caractères statique.
C'est ce qui permet de passer un tableau (['/projets', projet.id]) plutôt que simplement du texte.
Le résultat sera le lien suivant: /projets/ID_DE_PROJET. C'est Angular qui sera responsable de passer du tableau au string final.
Sous cette forme, Angular met bout à bout les différents paramètres que vous lui passez pour construire un chemin complet.
Vous devriez pouvoir naviguer de projet en projet!
