Utilisation des paramètres de route dans un composant Angular
Voyons maintenant comment nous pouvons utiliser les paramètres de route à l'intérieur de la classe du composant.
Supposons que nous ayons la route suivante avec des paramètres :
const routes: Routes = [
{ path: 'aaaa/:id', component: AaaaComponent },
{ path: 'bbbb', component: BbbbComponent },
];
Supposons que nous ayons des liens pour naviguer vers ce composant avec différents paramètres :
<nav>
<a
routerLink="/aaaa/1"
routerLinkActive="active"
>
1
</a>
<a
routerLink="/aaaa/2"
routerLinkActive="active"
>
2
</a>
<a
routerLink="/aaaa/3"
routerLinkActive="active"
>
3
</a>
</nav>
Supposons que le composant enfant contienne le tableau suivant :
let arr: string = [
'a', 'b', 'c', 'd', 'e'
];
export class AaaaComponent {
}
En fonction de la valeur du paramètre de route, récupérons l'élément correspondant du tableau :
export class AaaaComponent {
constructor(private activateRoute: ActivatedRoute) {
let params = activateRoute.snapshot.params;
let id = params['id'];
this.value = arr[id];
}
}
Affichons l'élément obtenu dans le template :
valeur : {{ value }}
Supposons que le composant enfant stocke le tableau d'objets suivant :
[
{
name: 'user1',
surn: 'surn1',
},
{
name: 'user2',
surn: 'surn2',
},
{
name: 'user3',
surn: 'surn3',
},
]
Créez une route avec un paramètre. En fonction de la valeur du paramètre, les données de l'un des utilisateurs doivent être affichées dans le template.
