Maison > interface Web > js tutoriel > Comment l'injection de dépendances fonctionne-t-elle au-delà des composants angulaires 2 ?

Comment l'injection de dépendances fonctionne-t-elle au-delà des composants angulaires 2 ?

Barbara Streisand
Libérer: 2024-11-15 18:14:03
original
633 Les gens l'ont consulté

How Does Dependency Injection Work Beyond Angular 2 Components?

Injecter des services dans Angular 2 (bêta)

Dans Angular 2, injecter un service dans un composant est simple, mais comment pouvons-nous l'utiliser injection de dépendances (DI) pour transférer des services au-delà des composants ?

Injecter des services en dehors de Composants

Pour y parvenir, nous annotons les prestations souhaitées avec le décorateur @Injectable. Ce décorateur signifie que les paramètres au sein du constructeur de la classe annotée doivent recevoir des injections.

Comprendre le mécanisme d'injection

Le mécanisme DI dans Angular 2 fonctionne sur un arbre de injecteurs reliés selon une structure hiérarchique. Ces injecteurs sont mappés sur l'arborescence des composants, mais il n'y a pas d'injecteurs spécifiques pour les services.

Lorsqu'un service est annoté avec @Injectable, Angular tente de créer ou de récupérer une instance pour ce type de service dans l'injecteur pour l'actuel. chaîne d'exécution.

Exemple : Chaîne d'injection de services

Considérez l'exemple suivant application :

  • AppComponent (composant principal)
  • ChildComponent (sous-composant)
  • Service1 (utilisé par ChildComponent)
  • Service2 (utilisé par Service1)

Chaque service et composant est annoté avec @Injectable.

Hiérarchie des injecteurs et injection de services

Dans cette application, nous avons trois injecteurs :

  • Injecteur d'application (configuré lors du bootstrapping )
  • Injecteur AppComponent (configuré via ses fournisseurs attribut)
  • Injecteur ChildComponent (configuré de la même manière)

Lors de l'injection de Service1 dans ChildComponent, Angular recherche d'abord un fournisseur Service1 dans l'injecteur ChildComponent, puis dans l'injecteur AppComponent, et enfin dans l'injecteur d'application.

De même, lors de l'injection de Service2 dans Service1, la même recherche Le processus se produit.

Portée du fournisseur et hiérarchie des injecteurs

Ce processus de recherche détermine où instancier et partager les instances de service. Les fournisseurs peuvent être spécifiés à différents niveaux :

  • Niveau de l'application : les instances sont partagées dans toute l'application.
  • Niveau du composant : les instances sont partagées au sein du composant, de ses sous-composants et des services dépendants.

Conclusion

Par en tirant parti du décorateur @Injectable et en comprenant le mécanisme DI dans Angular 2, nous pouvons injecter efficacement des services entre composants et services, nous permettant d'organiser et de partager les dépendances selon les besoins.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal