Injection de dépendances

Objectifs de ce chapitre

• ✔️
  Injectez TaskService

  Découvrez comment injecter le TaskService dans la classe TaskListComponent.

• ✔️
  Obtenez la référence de la liste des tâches

  Découvrez comment obtenir la référence de la liste des tâches à partir du TaskService.

Supprimez la liste des tâches du TaskListComponent

La classe TaskListComponent utilise toujours sa propre liste de tâches. Vous avez besoin qu’il utilise la liste du service à la place. La première étape consiste à supprimer la liste des tâches de la classe TaskListComponent.

Attention

Au fur et à mesure que vous supprimez cette liste, l’application cessera de fonctionner (elle ne compilera plus) pendant un moment car le Template HTML attend toujours une variable tasks.

🎓 Instructions

1. Supprimez la variable tasks du fichier src/app/task-list.component.ts.

   task-list.component.ts

   @Component({
       selector: 'app-task-list',
       templateUrl: './task-list.component.html',
       styleUrls: ['./task-list.component.css']
   })
   export class TaskListComponent {
   
       tasks: Task[] = [
                   {
                       id: uuid(),
                       title: 'Tâche 1',
                       description: 'Description de la tâche 1',
                       createdAt: new Date()
                   },
                   {
                       id: uuid(),
                       title: 'Tâche 2',
                       description: 'Description de la tâche 2',
                       createdAt: new Date()
                   }
               ];
   }

Injectez le TaskService

Votre classe TaskListComponent doit utiliser TaskService pour obtenir la liste des tâches. Angular utilise le système d’injection de dépendances pour fournir le TaskService à la classe TaskListComponent.

La classe TaskService est préfixée par le décorateur @Injectable(). Ce décorateur indique à Angular que la classe TaskService peut être injectée dans d’autres classes.

Pour ce faire, vous allez référencez la classe TaskService dans le constructeur de classe TaskListComponent.

constructor(private taskService: TaskService) {}

Vous pouvez maintenant utiliser la variable taskService pour accéder à la liste des tâches et initialiser une variable locale avec la liste des tâches.

tasks: Task[] = this.taskService.tasks;

🎓 Instructions

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

task-list.component.ts

import { Component } from '@angular/core';

import { TaskService } from '../task.service';

@Component({
    selector: 'app-task-list',
    templateUrl: './task-list.component.html',
    styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {

    tasks: Task[] = this.taskService.tasks;


    constructor(private taskService: TaskService) {}
}

✔️ Ce que vous avez appris

Vous avez appris à injecter un service dans un composant à l’aide du système d’injection de dépendances d’Angular. Il rend votre service accessible dans le composant et vous permet d’utiliser les méthodes et propriétés du service.