Ho, cette partie n'est plus d'actualité ! 👀

Depuis Angular 14, il est recommandé d'utiliser la fonction inject() qui simplifie l'injection de dépendances dans vos composants et services. Pour en savoir plus, consultez Injection de dépendance.

Comment utiliser @Inject dans Angular ?

A quoi ça sert ?

Le décorateur @Inject est utilisé dans Angular pour indiquer qu'une dépendance doit être injectée dans un constructeur de classe.

Lorsque vous utilisez @Inject, vous pouvez spécifier le type de dépendance que vous souhaitez injecter en tant que paramètre du décorateur. Angular utilisera alors son système de gestion de dépendances pour fournir une instance de la dépendance spécifiée au constructeur lorsqu'il crée une nouvelle instance de la classe annotée.

L'utiliser

@Inject est une décoration Angular qui permet de spécifier une dépendance à injecter dans un constructeur de composant ou de service.

Voici comment l'utiliser :

1. Déclarez une propriété de votre classe en utilisant @Inject et en spécifiant le type de dépendance à injecter. Par exemple :

    import { Inject, Component } from '@angular/core';
   
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    class MyComponent {
      constructor(@Inject(MyService) private myService: MyService) {}
    }

2. Assurez-vous que la dépendance est fournie dans le scope de l'application. Vous pouvez le faire en l'ajoutant dans la liste des providers de votre module ou de votre composant. Par exemple :

   @NgModule({
     providers: [MyService]
   })
   class MyModule {}

3. Vous pouvez maintenant utiliser votre service injecté dans votre composant en accédant à la propriété déclarée. Par exemple :

   import { Inject, Component } from '@angular/core';
   
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
   class MyComponent {
     constructor(@Inject(MyService) private myService: MyService) {}
   
     ngOnInit() {
       this.myService.doSomething();
     }
   }

Quand faut-il utiliser @Inject ?

Il n'est pas nécessaire d'utiliser le décorateur @Inject pour injecter un service dans un composant ou un autre service d'Angular. Vous pouvez simplement déclarer une propriété de votre classe en utilisant le type du service et Angular s'occupera de l'injection de la dépendance.

Voici comment cela pourrait être mis en œuvre :

import { MyService } from './my.service';

class MyComponent {
  constructor(private myService: MyService) {}

  ngOnInit() {
    this.myService.doSomething();
  }
}

Il est également possible de spécifier une chaîne de caractères comme argument de @Inject, plutôt que le type de dépendance. Dans ce cas, la chaîne de caractères sera utilisée comme nom de la dépendance et doit correspondre au nom utilisé dans les providers. Cela peut être utile si vous avez besoin de fournir plusieurs instances d'un même type de dépendance et de les différencier par leur nom.

Faut il utiliser @Inject ou non pour injecter un service ?

Cependant, il y a quelques cas où vous pouvez vouloir utiliser le décorateur @Inject pour spécifier une dépendance à injecter. Par exemple :

• Si vous avez besoin de fournir plusieurs instances d'un même type de dépendance et de les différencier par leur nom ou leur usage, vous pouvez utiliser @Inject et spécifier une chaîne de caractères comme argument, plutôt que le type de dépendance.
• Si vous avez besoin de récupérer une référence à un élément DOM dans votre composant ou service, vous pouvez utiliser @Inject et spécifier le décorateur ElementRef comme argument.

Voici un exemple d'utilisation de @Inject dans ces cas :

import { Inject } from '@angular/core';
import { MyService } from './my.service';
import { ElementRef } from '@angular/core';

class MyComponent {
  constructor(@Inject('MyService1') private myService1: MyService,
              @Inject('MyService2') private myService2: MyService,
              @Inject(ElementRef) private elementRef: ElementRef) {}

  ngOnInit() {
    this.myService1.doSomething();
    this.myService2.doSomethingElse();
    console.log(this.elementRef.nativeElement);
  }
}

Vous devez également fournir les dépendances ou les valeurs de configuration dans la liste des providers de votre module ou de votre composant, en utilisant le décorateur @Provide et en spécifiant la clé de dépendance ou la valeur comme argument.

import { MyService } from './my.service';

@NgModule({
  providers: [
    MyService,
    { provide: 'MyService1', useExisting: MyService },
    { provide: 'MyService2', useExisting: MyService }
  ]
})
class MyModule {}

Avec une chaîne de caractères

Voici un exemple d'utilisation de @Inject pour injecter une chaîne de caractères, comme une URL de base :

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

class MyService {
  constructor(@Inject('BASE_URL') private baseUrl: string) {}

  getData() {
    return this.http.get(`${this.baseUrl}/data`);
  }
}

Pour fournir la chaîne de caractères BASE_URL, vous devriez utiliser le décorateur @InjectionToken et l'ajouter à la liste des providers de votre module ou de votre composant :

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

export const BASE_URL = new InjectionToken<string>('BASE_URL');

@NgModule({
  providers: [
    { provide: BASE_URL, useValue: 'https://my-api.com' }
  ]
})
class MyModule {}

Vous pouvez maintenant utiliser le service injecté dans votre composant en accédant à la propriété baseUrl :

import { MyService } from './my.service';
import { Inject, Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
class MyComponent {
  constructor(private myService: MyService) {}

  ngOnInit() {
    this.myService.getData().subscribe(data => console.log(data));
  }
}

Utiliser InjectionToken plutôt qu'une chaîne de caractères

Le décorateur @InjectionToken est utilisé pour créer un type spécial d'objet, appelé "token d'injection", qui peut être utilisé pour fournir des valeurs de configuration ou des dépendances dans le contexte de l'injection de dépendances d'Angular.

Voici comment utiliser @InjectionToken dans un exemple concret :

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

export const API_URL = new InjectionToken<string>('API_URL');

@NgModule({
  providers: [
    { provide: API_URL, useValue: 'https://my-api.com' }
  ]
})
class MyModule {}

Vous pouvez maintenant injecter la valeur de API_URL dans un service ou un composant en utilisant @Inject et en spécifiant le token d'injection comme argument :

import { Inject } from '@angular/core';
import { API_URL } from './my.module';

class MyService {
  constructor(@Inject(API_URL) private apiUrl: string) {}

  getData() {
    return this.http.get(`${this.apiUrl}/data`);
  }
}