Vous apprendrez à configurer correctement la navigation au sein de votre application Angular et à transmettre des données entre les composants en utilisant l’URL.

Nous avons déjà deux routes configurées :

• / — affiche la liste de toutes les tâches ;

• /task/:id — affiche les détails d’une tâche spécifique par son ID.

Notre objectif est désormais de faire en sorte que, lorsqu’un utilisateur clique sur un bouton à l’intérieur d’une carte de tâche, l’application navigue vers une page de détails. Le TaskDetailsComponent récupérera alors l’ID de la tâche depuis l’URL et l’utilisera pour obtenir toutes les données de la tâche.

Comment les composants interagissent

Définissons comment cette interaction de routage fonctionnera.

Nous ajouterons un bouton à l'intérieur de TaskComponent. Lorsqu'il est cliqué, le composant émettra un événement vers le composant parent (TaskListComponent). Le parent gérera la navigation réelle en mettant à jour l'URL, ce qui déclenchera le chargement de TaskDetailsComponent par Angular pour la tâche sélectionnée.

Pourquoi ne pas effectuer le routage directement depuis TaskComponent ?

Si nous souhaitons réutiliser TaskComponent ailleurs (par exemple, dans une fenêtre modale ou une autre liste), il ne doit pas être lié à la logique de routage. Il doit simplement notifier le parent qu'une action de navigation est demandée.

Cette approche est plus facile à tester et à lire, centralise la logique de routage, et garantit que TaskComponent reste clair et concentré sur ses responsabilités.

Implémentation de TaskComponent

La fonction principale de TaskComponent est d'émettre des événements vers son parent. Nous ajouterons un bouton dans le template qui appellera navigateToTask(), lequel émettra l'événement.

Lorsque l'utilisateur clique sur le bouton d'information, la méthode navigateToTask() émet l'identifiant de la tâche. Cet événement est capturé par le parent (TaskListComponent), qui gère ensuite la navigation à l'aide du routeur d'Angular.

Implémentation de TaskListComponent

Ce composant est responsable de la navigation vers la page de détails de la tâche.

Pour cela, nous utilisons le service intégré Router d'Angular, qui permet de modifier l'URL de manière programmatique et de charger le composant approprié en fonction de la route.

Nous avons ajouté le service Router dans le constructeur. Angular fournit automatiquement ce service lors de la création du composant, aucune configuration supplémentaire n'est donc nécessaire.

Nous avons également mis en place un écouteur d'événement pour (onNavigate), qui déclenche la méthode navigateToTask() .

Lorsque la méthode est appelée (par exemple, lorsque l'utilisateur clique sur le bouton d'information), elle construit la route /task/3, et le routeur met à jour l'URL et charge le TaskDetailsComponent.

Récupération d'une tâche par ID dans TaskDetailsComponent

Lorsque l'utilisateur navigue vers la route /task/:id, Angular charge le TaskDetailsComponent. Ce composant est responsable de :

• Récupérer l'ID depuis l'URL ;

• Trouver la tâche correspondante par son ID ;

• Afficher les détails de la tâche à l'écran.

Voici comment cela fonctionne :

Explication :

Le service ActivatedRoute permet d'accéder aux paramètres de la route actuelle.

• On utilise snapshot.paramMap.get('id') pour extraire la valeur id de l'URL ;

• Ensuite, on la convertit en nombre et on la transmet à getTaskById(id) du TaskService pour récupérer la tâche ;

• La méthode goToHomePage() permet de revenir à la page principale où la liste complète des tâches est affichée.

Ainsi, en utilisant Angular Router, la navigation entre les composants a été configurée avec succès et les données sont transmises via un paramètre d'URL. Le TaskListComponent gère la navigation par identifiant de tâche, et le TaskDetailsComponent lit l'identifiant depuis la route et charge la tâche correspondante.