Comment puis-je injecter des services dans d'autres services dans Angular 2 ?

Injecter des services dans d'autres services dans Angular 2 (bêta)

L'injection de services dans des composants est simple à l'aide du décorateur @Component. Cependant, injecter des services en dehors des composants pose un défi.

Énoncé du problème

Dans Angular 2, nous voulons éviter d'instancier manuellement des services au sein d'autres services, comme le montre le extrait de code suivant :

export class MyFirstSvc {

}

export class MySecondSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

export class MyThirdSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

Solution

La solution consiste à utiliser le décorateur @Injectable sur les services que l'on souhaite injecter. Ce décorateur prépare les paramètres constructeur du service pour l'injection de dépendances.

Hiérarchie des injecteurs

Pour comprendre le fonctionnement de l'injection, il est essentiel de saisir le concept de hiérarchie des injecteurs :

• Injecteur d'application : Configuré à l'aide du deuxième paramètre de la fonction bootstrap.
• Injecteur de composant : Configuré à l'aide de l'attribut fournisseurs du composant. Il peut référencer des fournisseurs définis dans l'injecteur parent.

Lors de l'injection d'un service dans un composant ou un autre service, Angular2 recherche le fournisseur dans l'ordre suivant :

1. Composant Injecteur
2. AppComponent Injector
3. Application Injector

Partage de fournisseur

La hiérarchie des injecteurs permet un partage contrôlé des instances de service :

• Fournisseur au niveau de l'application :Partagé dans l'ensemble de l'application.
• Fournisseur au niveau du composant :Partagé au sein du composant, son composants enfants et les services impliqués dans sa chaîne de dépendances.

Exemple

@Injectable()
export class Service1 {
  constructor(service2:Service2) {
    this.service2 = service2;
  }

  getData() {
    return this.service2.getData();
  }
}

@Injectable()
export class Service2 {

  getData() {
    return [{ message: 'message1' }, { message: 'message2' }];
  }
}

Dans cet exemple :

• Service1 dépend de Service2.
• Lors de l'instanciation de Service1 dans ChildComponent, Angular2 recherche d'abord Service1 dans l'injecteur ChildComponent, puis dans l'injecteur AppComponent et enfin dans l'injecteur Application.
• De même, lors de l'instanciation de Service2 dans Service1, Angular2 suit la même hiérarchie.
• La hiérarchie des injecteurs et le positionnement du fournisseur permettent un partage flexible des dépendances en fonction des besoins de l'application.

Ressources

• [Guide d'injection de dépendances hiérarchiques Angular2](https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html)
• [ Exemple Plunkr](https://plnkr.co/edit/PsySVcX6OKtD3A9TuAEw?p=preview)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!