Injection de dépendances avec inject

Créer un service injectable constitue la première partie du système d'injection de dépendances (DI) d'Angular. Comment injecter un service dans un composant ? Angular fournit une fonction pratique appelée inject(), utilisable dans le contexte approprié.

Note : Les contextes d'injection dépassent le cadre de ce tutoriel, mais vous pouvez en apprendre davantage dans le guide des Fondamentaux sur l'injection de dépendances (DI) et dans le guide sur le contexte d'injection.

Dans cette activité, vous allez apprendre à injecter un service et à l'utiliser dans un composant.

Il est souvent utile d'initialiser des propriétés de classe avec des valeurs fournies par le système de DI. Voici un exemple :

@Component({...})
class PetCareDashboard {
  petRosterService = inject(PetRosterService);
}

  1. Injecter le CarService

    Dans app.ts, injectez le CarService à l'aide de la fonction inject() et assignez-le à une propriété appelée carService.

    Note : Remarquez la différence entre la propriété carService et la classe CarService.

  2. Utiliser l'instance carService

    L'appel à inject(CarService) vous a fourni une instance de CarService utilisable dans votre application, stockée dans la propriété carService.

    Initialisez la propriété display avec l'implémentation suivante :

    display = this.carService.getCars().join(' ⭐️ ');

  3. Mettre à jour le template de App

    Mettez à jour le template du composant dans app.ts avec le code suivant :

    template: `<p>Car Listing: {{ display }}</p>`,

Vous venez d'injecter votre premier service dans un composant : excellent travail.