Maison > interface Web > js tutoriel > Explication détaillée du modèle d'injection de dépendances dans Angular

Explication détaillée du modèle d'injection de dépendances dans Angular

青灯夜游
Libérer: 2021-04-22 10:08:54
avant
2987 Les gens l'ont consulté

Cet article vous donnera une introduction détaillée au mode d'injection de dépendances dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Explication détaillée du modèle d'injection de dépendances dans Angular

Mode d'injection de dépendance angulaire

Injection de dépendance : Injection de dépendance, appelée DI

Problèmes à résoudre par le modèle d'injection de dépendances

En développement, vous rencontrerez souvent l'instanciation d'objets Lorsqu'il y a des dépendances entre plusieurs objets, l'instanciation manuelle sera particulièrement gênante. .

Si un objet A dépend de l'objet B, alors l'objet A n'a pas besoin d'instancier explicitement l'objet B sera injecté par un mécanisme externe. C’est le problème que résout l’injection de dépendances.

Un autre concept qui apparaît souvent avec l'injection de dépendances est appelé Inversion de contrôle.

Inversion de contrôle : L'inversion de contrôle, appelée IOC, fait référence à l'inversion du contrôle dépendant de l'intérieur du code vers l'extérieur du code. L'

Injection de dépendance et l'Inversion de contrôle sont les deux faces d'une même médaille, exprimant la même idée. Injection de dépendance se concentre sur la description des moyens, c'est-à-dire comment mettre en œuvre l'inversion du contrôle. Inversion du contrôle se concentre sur la description du but, c'est-à-dire que le but est d'inverser le contrôle de. dépendances de l’intérieur du code vers le code externe.

Recommandations de tutoriel associées : "Tutoriel angulaire"

Les avantages du mode d'injection de dépendances

  • Couplage lâche, peut réutiliser
  • Améliorer la testabilité des composants

Comment Angular implémente l'injection de dépendances

Injecteur

Chaque composant possède une instance d'injecteur, qui est chargée d'injecter les objets requis par le composant. L'injecteur est une classe de service fournie par Angular. Dans des circonstances normales, il n'est pas nécessaire d'appeler directement la méthode d'injection. L'injecteur injectera automatiquement les objets requis par le composant dans le composant via le constructeur (constructeur) du composant. Le fournisseur indique à l'injecteur comment créer l'instance.

Provider

Pour que l'injecteur sache comment l'objet injecté est instancié, un fournisseur doit être spécifié. Généralement, nous transmettrons l'attribut fournisseurs du. composant ou module Déclarez les objets qui doivent être fournis.

Méthode de déclaration générale

providers:[{provide:AService, useClass: AServivce}] <=> providers:[AService]
provide 属性:指定了提供器的令牌(token)
useClass 属性:表示实例化方式是 new
Copier après la connexion

Méthode de déclaration de méthode d'usine

使用 useFactory 方式实例化对象
providers:[
  {
    provide:AService, 
    useFactory: (bService: BService) => {
      ....
    },
    deps:[BService] //deps声明工厂方法所依赖的服务。
    ]
工厂方法创建的对象是单例对象
Copier après la connexion

Objet déclaré dans le constructeur, Le jeton dans les fournisseurs sera mis en correspondance en fonction du nom de la classe, puis l'objet spécifié sera instancié en fonction de la valeur de l'attribut useClass.

Règles d'injection du fournisseur

  • Lorsqu'un fournisseur est déclaré dans un module, il est visible par tous les composants et peut être injecté dans tous les composants
  • ;
  • Lorsqu'un fournisseur est déclaré dans un composant, il n'est visible que par le composant et les sous-composants dans lesquels il est déclaré, et n'est pas visible par les autres composants
  • Lorsqu'un fournisseur déclaré dans un module a le même valeur qu'un fournisseur déclaré dans un token de composant, le fournisseur déclaré dans le composant remplacera le fournisseur déclaré dans le module
  • En général, nous devons déclarer le fournisseur dans le module ;

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!

Étiquettes associées:
source:csdn.net
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal