Routing avancé

Objectifs de ce chapitre

• ✔️
  Routing avancé

  Apprenez à utiliser le routing avancé dans une application Angular.

Dans la dernière étape, vous avez testé le formulaire avec ce scénario :

1. Cliquez sur le lien Ajoutez une nouvelle tâche
2. Saisissez un titre et une description dans le formulaire
3. Cliquez sur le bouton Créer une tâche
4. Cliquez sur le lien Liste des tâches

Mais que se passe-t-il si l’on souhaite rediriger l’utilisateur vers la liste des tâches après la soumission du formulaire ? C’est un scénario courant dans les applications Web et Angular fournit un moyen de le faire.

Vous avez vu comment déclencher une navigation en cliquant sur un lien avec la directive routerLink. Mais dans cette situation, vous allez déclencher une navigation lorsque la fonction submit est appelée.

Injectez le Router

Vos propres services personnalisés ne sont pas les seuls éléments que vous pouvez injecter dans le constructeur d’un composant. En utilisant la fonctionnalité Angular Router, vous pouvez injecter le service Router dans un composant.

Ce service vous permet de récupérer des informations sur la route actuelle et vous permet de naviguer vers une route différente.

🎓 Instructions

1. Modifiez le fichier src/app/task-form.component.ts.

   task-form.component.ts

   import { Component } from '@angular/core';
   import { TaskService } from '../task.service';
   
   import { Router } from '@angular/router';
   
   @Component({
       selector: 'app-task-form',
       templateUrl: './task-form.component.html',
       styleUrls: ['./task-form.component.css']
   })
   export class TaskFormComponent {
       task = {
           title: '',
           description: ''
       };
   
       constructor(
           private taskService: TaskService,
   
           private router: Router
       ) { }
   
       submit() {
           this.taskService.addTask(this.task);
   
           this.router.navigate(['/']);
       }
   }

La fonction de navigation attend un tableau de segments de routes en tant que paramètre. Dans notre cas, vous allez naviguer vers la route tasks telle que vous l’avez défini dans votre configuration de route. Vous transmettez donc ['/tasks'].

const routes: Routes = [
  { path: 'tasks', component: TaskListComponent },
  { path: 'add-task', component: TaskFormComponent }
];

Testez-le

Maintenant, si vous répétez le scénario précédent :

1. Cliquez sur le lien Ajoutez une nouvelle tâche
2. Saisissez un titre et une description dans le formulaire
3. Cliquez sur le bouton Créer une tâche

Vous devriez être redirigé vers la liste des tâches.

✔️ Ce que vous avez appris

Dans ce chapitre, vous avez appris à utiliser le routage programmatique dans une application Angular. Vous avez appris à injecter le service Router dans un composant et à utiliser sa fonction navigate pour naviguer vers un itinéraire différent.