15-2 Récupérer un paramètre de route
Pour afficher le détail d'un projet, il nous faudra récupérer l'identifiant à partir de l'URL. Angular peut évidemment nous aider avec cette tâche!
Pour accéder à la route courante, soit la route active, on doit utiliser une instance de ActivatedRoute.
ActivatedRoute, comme son nom l'indique est une classe fournie par Angular permettant d'obtenir la route active. Il est possible d'en injecter une instance dans les composantes via le système d'injection de dépendances.
Injecter ActivatedRoute dans projet-detail
Ajoutez, via le constructeur du composant, une propriété private route de type ActivatedRoute.
export class ProjetDetail {
constructor(private route: ActivatedRoute) {
}
}
Le fait d'utiliser private crée automatiquement une propriété route au niveau de la classe qu'on pourra accéder par la suite.
Angular se chargera d'injecter l'instance pour nous.
Ajouter une propriété id à la page
Une fois l'id récupérer, on voudra le conserver dans la classe pour l'utiliser ultérieurement au besoin. On se créera donc une propriété id, de type string.
Ajoutez une propriété id à la classe ProjetDetailPage:
export class ProjetDetail {
protected id: number | null = null;
constructor(private route: ActivatedRoute) {
}
}
Bien que le id est un number, son premier état sera null et il est possible que, via la fonction de récupération du paramètre, le résultat soit null. Ainsi, on doit couvrir les deux cas de figure pour rendre TypeScript heureux. D'où la mention number | null
Implémenter l'interface OnInit
Implémentez, tel que vu dans les niveaux précédents, l'interface OnInit et la fonction associée ngOnInit().
export class ProjetDetail implements OnInit {
protected id: number | null = null;
constructor(private route: ActivatedRoute) {
}
ngOnInit(): void {
throw new Error('Method not implemented.');
}
}
Récupérer l'identifiant id contenu dans la route
On peut maintenant récupérer l'identifiant lors de l'initialisation de la composante:
export class ProjetDetail implements OnInit {
protected id: number | null = null;
constructor(private route: ActivatedRoute) {
}
ngOnInit(): void {
this.id = this.route.snapshot.paramMap.get('id');
}
}
this.route est l'objet de classe ActivatedRoute injecté via le constructeur
snapshot permet d'obtenir la version actuelle de la route
paramMap est l'objet contenant tous les paramètres d'URL
get('id') qui permet de récupérer le paramètre id, tel que spécifié dans le format de la route. Si notre paramètre avait eu un nom différent, on aurait utilisé get('nom_du_parametre).
Vous remarquerez cependant cette erreur:
En effet, comme le paramètre de route vient d'une URL, c'est un string! Il faut donc convertir ce string en int. Une façon facile de faire cela en TypeScript est de simplement ajouter le préfixe +. Ainsi, si un paramètre de route est présent:
export class ProjetDetail implements OnInit {
protected id: number | null = null;
constructor(private route: ActivatedRoute) {
}
ngOnInit(): void {
const routeParam = this.route.snapshot.paramMap.get('id');
if(routeParam){
this.id = +routeParam;
}
}
}
Teste que la récupération fonctionne
Essayons d'afficher l'identifiant obtenu dans le template de la composante afin de vérifier que le tout fonction.
@Component({
selector: 'app-projet-detail',
imports: [],
template: `
<p>
Projet avec id: {{id}}
</p>
`,
styles: ``
})
Accédez ensuite via votre navigateur à une URL de projet contenant un identifiant, tel que http://localhost:4200/projets/1234. Vous devriez obtenir ceci:
