L'apprentissage angulaire parle d'injection de dépendances

Qu'est-ce que l'injection de dépendances ? Cet article vous guidera à travers l'injection de dépendances (DI) dans angular et présentera en détail les deux concepts fondamentaux du framework AngularDI : les injecteurs et les fournisseurs. J'espère que cela vous sera utile !

L'injection de dépendance (DI) en angulaire

1 Présentation

L'injection de dépendance (Injection de dépendance), appelée DI, est un objet-. code orienté>Un principe de conception en programmation, utilisé pour réduire le DI，是面向对象编程中的一种设计原则，用来减少代码之间的耦合度。【相关教程推荐：《angular教程》】

class MailService {
  constructor(APIKEY) {}
}

class EmailSender {
  mailService: MailService
  constructor() {
    this.mailService = new MailService("APIKEY1234567890")
  }

  sendMail(mail) {
    this.mailService.sendMail(mail)
  }
}

const emailSender = new EmailSender()
emailSender.sendMail(mail)

EmailSender 类运行时要使用 MailService 类，EmailSender 类依赖 MailService 类，MailService 类是 EmailSender 类的依赖项。

以上写法的耦合度太高，代码并不健壮。如果 MailService 类改变了参数的传递方式，在 EmailSender 类中的写法也要跟着改变。

class EmailSender {
  mailService: MailService
  constructor(mailService: MailService) {
    this.mailService = mailService;
  }
}
const mailService = new MailService("APIKEY1234567890")
const emailSender = new EmailSender(mailService)

在实例化 EmailSender 类时将它的依赖项通过 constructor 构造函数参数的形式注入到类的内部，这种写法就是依赖注入。

通过依赖注入降了代码之间的耦合度，增加了代码的可维护性。MailService 类中代码的更改再也不会影响 EmailSender 类。

2、DI 框架

Angular 有自己的 DI 框架，它将实现依赖注入的过程隐藏了，对于开发者来说只需使用很简单的代码就可以使用复杂的依赖注入功能。

在 Angular 的 DI 框架中有四个核心概念：

• Dependency：组件要依赖的实例对象，服务实例对象

• Token：获取服务实例对象的标识

• Injector：注入器，负责创建维护服务类的实例对象并向组件中注入服务实例对象（管理服务对象的创建和获取）。

• Provider：配置注入器的对象，指定创建服务实例对象的服务类和获取实例对象的标识。（Provider：提供程序）

2.1 注入器 Injectors

注入器负责创建服务类实例对象，并将服务类实例对象注入到需要的组件中。

• 创建注入器

  import { ReflectiveInjector } from "@angular/core"
  // 服务类
  class MailService {}
  // 创建注入器并传入服务类
  const injector = ReflectiveInjector.resolveAndCreate([MailService])

• 获取注入器中的服务类实例对象

  const mailService = injector.get(MailService)

• 服务实例对象为单例模式，注入器在创建服务实例后会对其进行缓存

  const mailService1 = injector.get(MailService)
  const mailService2 = injector.get(MailService)
  
  console.log(mailService1 === mailService2) // true

• 不同的注入器返回不同的服务实例对象

  const injector = ReflectiveInjector.resolveAndCreate([MailService])
  const childInjector = injector.resolveAndCreateChild([MailService])
  
  const mailService1 = injector.get(MailService)
  const mailService2 = childInjector.get(MailService)
  
  console.log(mailService1 === mailService2) // false

• 服务实例的查找类似函数作用域链couplage

  entre les codes. [Recommandation de didacticiel connexe : "
Tutoriel angulaire

"]

const injector = ReflectiveInjector.resolveAndCreate([MailService])
const childInjector = injector.resolveAndCreateChild([])

const mailService1 = injector.get(MailService)
const mailService2 = childInjector.get(MailService)

console.log(mailService1 === mailService2) // true

La classe EmailSender doit utiliser la classe MailService lors de l'exécution. La classe EmailSender dépend de la classe MailService et la classe MailService est une dépendance de la classe EmailSender.

Le degré de couplage de la méthode d'écriture ci-dessus est trop élevé et le code n'est pas robuste. Si la classe MailService modifie la façon dont les paramètres sont transmis, la méthode d'écriture dans la classe EmailSender changera également.

const injector = ReflectiveInjector.resolveAndCreate([
  { provide: MailService, useClass: MailService }
])

• Lors de l'instanciation de la classe EmailSender, injectez ses dépendances à l'intérieur de la classe sous la forme de paramètres de constructeur de constructeur. Cette façon d'écrire est l'injection de dépendances.

• Grâce à l'injection de dépendances, le couplage entre les codes est réduit et la maintenabilité du code est augmentée. Les modifications de code dans la classe MailService n'affectent plus la classe EmailSender.

• 2. Framework DI

Angular possède son propre framework DI, qui masque le processus d'injection de dépendances. Pour les développeurs, seule la fonctionnalité d'injection de dépendances complexes peut le faire. être utilisé avec un code très simple.

Il existe quatre concepts fondamentaux dans le framework DI d'Angular :

Dépendance : objets d'instance dont dépendent les composants, objets d'instance de service🎜🎜🎜🎜Token : obtenez le identité de l'objet instance de service🎜🎜🎜🎜Injecteur : Injecteur, chargé de créer et maintenir l'objet instance de la classe de service et de injecter le service dans le composant Objet Instance (gère la création et l'acquisition des objets de service). 🎜🎜🎜🎜Provider : Configurez l'objet de l'injecteur, spécifiez la classe de service pour créer l'objet instance de service et obtenez l'identifiant de l'objet instance. (Fournisseur : Fournisseur) 🎜🎜🎜🎜🎜2.1 Injecteurs Injecteurs🎜🎜🎜Les injecteurs sont responsables de la création d'objets d'instance de classe de service et de l'injection d'objets d'instance de classe de service dans les composants requis. 🎜🎜🎜🎜Créez l'injecteur🎜

const injector = ReflectiveInjector.resolveAndCreate([
  { provide: "mail", useClass: MailService }
])
const mailService = injector.get("mail")

🎜🎜🎜Obtenez l'objet d'instance de classe de service dans l'injecteur🎜

const injector = ReflectiveInjector.resolveAndCreate([
  {
    provide: "Config",
    useValue: Object.freeze({
      APIKEY: "API1234567890",
      APISCRET: "500-400-300"
    })
  }
])
const Config = injector.get("Config")

🎜🎜🎜L'objet d'instance de service est en mode singleton et l'injecteur le mettra en cache après avoir créé l'instance de service🎜rrreee🎜🎜 🎜Différents injecteurs renvoient différents objets d'instance de service🎜rrreee🎜🎜🎜La recherche d'instances de service est similaire à la fonction chaîne de portée Si le niveau actuel peut être trouvé, utilisez le niveau actuel. introuvable, accédez au niveau parent. Recherchez l'objet 🎜rrreee🎜🎜🎜🎜2.2 Provider 🎜🎜🎜🎜🎜 qui configure l'injecteur, en spécifiant la classe de service pour créer l'objet d'instance et l'identifiant pour accéder à l'objet d'instance de service. 🎜rrreee🎜🎜🎜L'identifiant pour accéder aux objets dépendants peut également être de type chaîne🎜rrreee🎜🎜🎜useValue🎜rrreee🎜🎜🎜 établit une relation de couplage lâche entre l'objet instance et les références externes. L'objet externe obtient l'objet instance via le. identifiant, tant que l'identifiant reste. Quelle que soit la façon dont le code interne change, cela n'affectera pas le monde extérieur. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéos 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!