Comment injecter des services en dehors des composants dans Angular 2 ?

Injection de dépendances dans Angular 2 : injection de services en dehors des composants

Dans Angular 2, l'injection de services dans des composants est simple à l'aide du décorateur @Component . Cependant, il existe des scénarios dans lesquels vous devrez peut-être injecter des services en dehors des composants. Cet article explique comment y parvenir à l'aide de l'injection de dépendances (DI).

Services injectables

Pour activer l'ID pour un service, celui-ci doit être décoré avec le décorateur @Injectable. . Ce décorateur marque la classe comme injectable, permettant d'injecter ses paramètres. Notez que le nom « Injectable » est légèrement trompeur, car il ne rend pas la classe injectable mais la rend plutôt injectable dans le sens où ses paramètres peuvent être injectés.

Mécanisme d'injection de dépendances

Angular 2 utilise un système hiérarchique d'injecteurs, chaque niveau correspondant à un composant ou un ensemble de composants particulier. Lorsque le système DI rencontre une dépendance, il recherche d'abord dans l'injecteur actuel. Si la dépendance n'est pas trouvée, il monte dans la hiérarchie des injecteurs jusqu'à ce qu'il trouve un fournisseur pour la dépendance.

Injecter des services entre injecteurs

Pour injecter un service dans un autre service, définissez simplement la dépendance dans le constructeur du service dépendant et ajoutez le décorateur @Injectable au service dépendant.

Pour exemple :

@Injectable()
export class MyFirstSvc {
  // ...
}

@Injectable()
export class MySecondSvc {
  constructor(private myFirstSvc: MyFirstSvc) {
    // ...
  }
}

Dans cet exemple, MySecondSvc dépend de MyFirstSvc et peut être injecté dans n'importe quel injecteur où MyFirstSvc est disponible.

Définition des fournisseurs

Pour spécifier le fournisseur d'un service, utilisez le tableau fournisseurs dans le décorateur @Component ou NgModule. Par exemple, si vous souhaitez définir MyFirstSvc comme fournisseur dans l'injecteur d'application, vous pouvez le faire comme suit :

@Component({
  // ...
  providers: [MyFirstSvc]
})
export class AppComponent {
  // ...
}

Conclusion

En comprenant la hiérarchie nature des injecteurs et du décorateur @Injectable, vous pouvez injecter efficacement des services en dehors des composants dans Angular 2. Cela vous permet de créer des services modulaires et réutilisables qui peuvent être facilement injectés et partagé sur votre application.

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!