17-9 Redirection manuelle
Une fois la requête complétée, il serait bien de retourner à la page de liste des projets. En fait, on veut simplement quitter la page du formulaire puisque le projet a été créé.
Pour avoir accès à la navigation, on doit utiliser le système de Router. Vous savez comment l'utiliser de façon manuelle sur un lien en ajoutant la propriété routerLink, mais comment faire si on veut changer de page via le code de la composante?
Injecter une instance de Router dans ProjetCreerPage
La première étape est d'injecter une instance de la classe Router d'Angular qui donne accès aux fonctionnalités de navigation et de routing via la logique de la classe.
constructor(private projetService: ProjetService,
private router: Router) { }
Appeler this.router.navigate une fois la réponse reçue
L'instance de Router possède une fonction navigate permettant de changer de route. Cette fonction prend en paramètre un tableau permettant de construire un chemin avec possiblement plusieurs paramètres. Exactement comme lorsqu'on utilise [routerLink].
Le tout est assez simple dans notre cas puisqu'on veut simplement rediriger vers /projets. Ainsi, on peut appeler this.router.navigate(['/projets']) pour être redirigé vers la page de liste de projets.
protected async soumettre() {
if(this.projetForm.valid){
const valeurForm = this.projetForm.value;
const projetRequete: ProjetCreerRequete = {
nom: valeurForm.nom!,
description: valeurForm.description || undefined
}
const projet = await this.projetService.creer(projetRequete);
this.router.navigate(['/projets']);
}
WebStorm vous indiquera que vous devez attendre le résultat de la Promise retournée par this.router.navigate, mais vous n'avez pas à le faire puisque le résultat ne nous intéresse pas particulièrement, on veut simplement changer de page!
