Il est très souvent utile dans une application dynamique d'avoir accès à la route active. Ce que ça va vous permettre de faire dans ce chapitre, c'est de créer une route avec un paramètre id pour visualiser un seul FaceSnap. Le component que vous allez associer à cette route pourra récupérer cet id afin de demander à FaceSnapsService de lui envoyer le FaceSnap correspondant.
Commençons par créer le component qui sera, pour simplifier, une copie de FaceSnapComponent, mais avec une nuance quant au FaceSnap affiché.
Visualisez un seul FaceSnap
Générez un nouveau component appelé SingleFaceSnapComponent, et transposez-y tout depuis FaceSnapComponent : template, TS et styles.
Vous pouvez dès maintenant créer la route qui appellera ce component. Il faut que l'on puisse y passer un paramètre dynamique, c'est-à-dire le segment de la route qui contiendra l'id du FaceSnap, et qui sera donc dynamique. Voilà comment faire :
const routes: Routes = [
{ path: 'facesnaps/:id', component: SingleFaceSnapComponent },
{ path: 'facesnaps', component: FaceSnapListComponent },
{ path: '', component: LandingPageComponent }
];Les :id spécifient que ce qui se trouvera après facesnaps/ correspondra à un paramètre qui s'appellera id.
Maintenant, si vous essayez de naviguer vers, par exemple, http://localhost:4200/facesnaps/1 (où 1 est un id valable), vous aurez :
Bien sûr ! On n'a aucun moyen de passer un FaceSnap au @Input() de ce component, car c'est le Router qui l'insère !
Heureusement, nous avons une solution !
Récupérez les paramètres de route
Afin de récupérer les informations de la route activée, vous allez injecterActivatedRoutedans SingleFaceSnapComponent, sans oublier d'enlever le décorateur @Input() de la propriété faceSnap :
export class SingleFaceSnapComponent implements OnInit {
faceSnap!: FaceSnap;
buttonText!: string;
constructor(private faceSnapsService: FaceSnapsService,
private route: ActivatedRoute) {}Ensuite, dans ngOnInit(), vous allez pouvoir récupérer le paramètre id via le snapshot de la route (un snapshot est un aperçu instantané d'une valeur qui change au cours du temps) :
const snapId = +this.route.snapshot.params['id'];Avec cet id, vous pouvez appeler la méthode getFaceSnapById() du service pour récupérer le FaceSnap correspondant :
this.faceSnap = this.faceSnapsService.getFaceSnapById(snapId);Maintenant, si vous naviguez vers votre route avec un id valable :
Pour compléter l'application, et permettre à vos utilisateurs d'accéder à cette nouvelle route, je vous propose de modifier FaceSnapComponent pour n'afficher que le titre et la description des FaceSnaps, et d'y ajouter un bouton qui permet d'ouvrir le FaceSnap dans la nouvelle route.
Du coup, le template donnera :
<div class="face-snap-card" [ngClass]="{ snapped: buttonText === 'Oops, unSnap!' }">
<h2>{{ faceSnap.title | uppercase }}</h2>
<p>{{ faceSnap.description }}</p>
<button (click)="onViewFaceSnap()">VIEW</button>
</div>Je vous laisse quelques instants pour tenter d'implémenter onViewFaceSnap(), sans indice cette fois-ci.
…
…
Voilà ma solution. Il faut bien sûr injecter le Router, et utiliser sa méthode navigateByUrl() :
onViewFaceSnap() {
this.router.navigateByUrl(`facesnaps/${this.faceSnap.id}`);
}Comme ça, votre page FaceSnaps ressemble à ça :
Et les boutons VIEW vous amènent vers les routes SingleFaceSnapComponent. Du coup, tout ce qui reste, c'est de mettre un lien ou un bouton Back dans SingleFaceSnapComponent pour permettre un retour en arrière facile, mais attention au piège !
<!-- ... -->
<h2>{{ faceSnap.title | uppercase }}</h2>
<a routerLink="/facesnaps">Back</a>
<!-- ... -->Avec ces dernières fonctionnalités, votre première application Angular est terminée !
En résumé
On récupère les paramètres de la route activée en injectant ActivatedRoute, et via son objet
snapshot.params.Pour naviguer vers une route absolue (et non relative), n'oubliez pas d'ajouter un
/au début de la route demandée.
Qu'avez-vous appris dans cette partie du cours ?
Vous avez centralisé données et logique dans un service que vous avez ensuite injecté dans les components concernés.
Vous avez ajouté un module de routing à votre application, et trois routes fonctionnelles.
Vous avez mis en place deux systèmes pour que vos utilisateurs puissent changer de route : les routerLinks et le Router.
À la fin du quiz qui suit ce chapitre, vous aurez terminé ce cours d'introduction à Angular ! Vous avez déjà appris beaucoup de choses. Mais ce n'est pas fini ! Après le dernier quiz, je vous partagerai comment poursuivre votre apprentissage du framework Angular...
