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

Injection de dépendances (DI) dans Angular

1. Présentation

L'injection de dépendances (DI), appelée DI , est un设计原则en programmation面向对象qui est utilisé pour réduire le couplage entre les codes. [Recommandation de didacticiel associée : "tutoriel angulaire"]

class MailService {
  constructeur (APIKEY) {}
}

classe EmailSender {
  service de messagerie : service de messagerie
  constructeur() {
    this.mailService = nouveau MailService("APIKEY1234567890")
  }

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

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

La classe EmailSender utilise la classe MailService lors de son 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.

classe EmailSender {
  service de messagerie : service de messagerie
  constructeur (mailService : MailService) {
    this.mailService = mailService;
  }
}
const mailService = nouveau MailService("APIKEY1234567890")
const emailSender = new EmailSender(mailService)

Lors de l'instanciation de la classe EmailSender, il injecte ses dépendances dans la classe via les paramètres du constructeur du constructeur. Cette façon d'écrire est l'injection de dépendances.

L'injection de dépendances réduit le couplage entre les codes et augmente la maintenabilité du code. Les modifications de code dans la classe MailService n'affectent plus la classe EmailSender.

2. Framework DI

Angular possède son propre DI 框架, qui隐藏le processus de mise en œuvre de l'injection de dépendances. Les développeurs n'ont besoin que d'un code très simple pour utiliser des fonctions d'injection de dépendances complexes.

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

• Dependency : l'objet d'instance dont dépend le composant, objet d'instance de service

• Token : obtient l'identité de l'objet d'instance de service

• Injector : l'injecteur, responsable de创建维护de l'objet d'instance du service. et注入dans le composant Objet instance de service (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

Les injecteurs sont chargés de créer des objets d'instance de classe de service et d'injecter des objets d'instance de classe de service dans les composants requis.

• Créez une

  importation d'injecteur {ReflectiveInjector} à partir de "@angular/core"
  //Classe de service classe MailService {}
  //Créer l'injecteur et passer dans la classe de service const injector = ReflectiveInjector.resolveAndCreate([MailService])

• Récupérer l'objet instance de classe de service dans l'injecteur

  const mailService = injector.get(MailService)

• L'objet instance de service est en mode singleton, et l'injecteur se trouve Une fois l'instance de service créée, elle sera mise en cache

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

• injecteurs différents renvoient différents objets d'instance de service

  const injector = réfléchissantInjector.resolveAndCreate([MailService])
  const childInjector = injector.resolveAndCreateChild([MailService])
  
  const mailService1 = injector.get(MailService)
  const mailService2 = enfantInjecteur.get(MailService)
  
  console.log(mailService1 === mailService2) // La recherche de fausses

• instances de service est similaire à la作用域链de fonction .Si le niveau actuel peut être trouvé, utilisez le niveau actuel. Si le niveau actuel ne peut pas être trouvé, accédez à . parent pour rechercher

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

2.2 L'

• objet injecteur de configuration du fournisseur spécifie la classe de service pour créer l'objet d'instance et l'identifiant pour accéder à l'objet d'instance de service.

  const injecteur = réfléchissantInjector.resolveAndCreate([
    { fournir : MailService, useClass : MailService }
  ])

• L'identifiant pour accéder à l'objet dépendant peut également être une chaîne de type

  const injector = réfléchissantInjector.resolveAndCreate([
    { fournir : "mail", useClass : MailService }
  ])
  const mailService = injector.get("mail")

• useValue

  const injector = réfléchissantInjector.resolveAndCreate([
    {
      fournir : "Config",
      useValue : Objet.freeze({
        APICLÉ : "API1234567890",
        APISCRET : "500-400-300"
      })
    }
  ])
  const Config = injector.get("Config")

établit une relation de couplage lâche entre l'objet d'instance et la référence externe. L'objet externe obtient l'objet d'instance via l'identifiant tant que l'identifiant reste inchangé, quelle que soit la manière dont le code interne. changements, cela n’affectera pas l’extérieur.