13-3 Injecter le service

La dernière étape est d'injecter le service dans la page (projets-index.ts) et de l'utiliser.

Pour l'injecter, il suffit de le mentionner dans le constructeur en tant que valeur privée.

1. Dans un premier temps, ajoutez un constructeur vide à votre composant
   src/app/features/projets/pages/projets-index.ts

   export class ProjetsIndex implements OnInit {
     protected projets: Projet[] | null = null
   
     constructor() {
     }
   
     //...

2. Ajouter comme dépendance ProjetService via le constructeur

src/app/features/projets/pages/projets-index.ts

export class ProjetsIndex implements OnInit {
  protected projets: Projet[] | null = null

  constructor(private projetService: ProjetService) {
  }

  //...

Faire un appel au service

Lors de l'initialisation du composant (ngOnInit), on appellera plutôt la méthode obtenirTous() du service ProjetService.

src/app/features/projets/pages/projets-index.ts

export class ProjetsIndex implements OnInit {
  protected projets: Projet[] | null = null

  constructor(private projetService: ProjetService) {
  }

  async ngOnInit(): Promise<void> {
    this.projets = await this.projetService.obtenirTous();
  }

//...

Test dans le navigateur

À ce stade-ci, votre application devrait fonctionner comme avant! La seule différence est que nous avons remplacé l'appel d'API dans la composante par un appel au service ayant été injecté dans cette dernière.

Supprimer obtenirProjets()

Vous pouvez supprimer la fonction obtenirProjets(), puisque nous ne l'utiliserons plus, et votre classe (outre le décorateur) devrait ressembler à ceci:

src/app/features/projets/pages/projets-index.ts

export class ProjetsIndex implements OnInit {
  protected projets: Projet[] | null = null

  constructor(private projetService: ProjetService) {}

  async ngOnInit(): Promise<void> {
    this.projets = await this.projetService.obtenirTous();
  }
}