Beim Angular Learning geht es um die Abhängigkeitsinjektion

Dependency Injection (DI) in Angular

1. Übersicht

Dependency Injection (DI), kurz DI genannt, ist ein设计原则in der面向对象Programmierung, das verwendet wird, um die Kopplung zwischen Codes zu reduzieren. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

class MailService {
  Konstruktor(APIKEY) {}
}

Klasse EmailSender {
  mailService: MailService
  Konstruktor() {
    this.mailService = new MailService("APIKEY1234567890")
  }

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

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

Die EmailSender-Klasse verwendet bei der Ausführung die MailService-Klasse. Die EmailSender-Klasse hängt von der MailService-Klasse ab, und die MailService-Klasse ist eine Abhängigkeit der EmailSender-Klasse.

Der Kopplungsgrad der oben genannten Schreibmethode ist zu hoch und der Code ist nicht robust. Wenn die MailService-Klasse die Art und Weise ändert, wie Parameter übergeben werden, ändert sich auch die Schreibmethode in der EmailSender-Klasse.

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

Beim Instanziieren der EmailSender-Klasse fügt sie ihre Abhängigkeiten über die Konstruktorparameter in die Klasse ein. Diese Schreibweise ist Abhängigkeitsinjektion.

Die Abhängigkeitsinjektion reduziert die Kopplung zwischen Codes und erhöht die Wartbarkeit des Codes. Codeänderungen in der MailService-Klasse wirken sich nicht mehr auf die EmailSender-Klasse aus.

2. DI-Framework

Angular verfügt über ein eigenes DI 框架, das den Prozess der Implementierung der Abhängigkeitsinjektion隐藏. Entwickler müssen nur sehr einfachen Code verwenden, um komplexe Abhängigkeitsinjektionsfunktionen zu verwenden.

Es gibt vier Kernkonzepte im DI-Framework von Angular:

• Dependency : das Instanzobjekt, von dem die Komponente abhängt, Dienstinstanzobjekt

• Token : erhält die Identität des Dienstinstanzobjekts

• Injector : der Injektor, der für创建维护des Instanzobjekts des Dienstes verantwortlich ist Klasse und注入in das Service-Instanzobjekt der Komponente (verwaltet die Erstellung und Erfassung von Serviceobjekten).

• Provider : Konfigurieren Sie das Objekt des Injektors, geben Sie die Dienstklasse an, um das Dienstinstanzobjekt zu erstellen und die Kennung des Instanzobjekts abzurufen. (Anbieter: Anbieter)

2.1 Injektoren

Injektoren sind für die Erstellung von Serviceklasseninstanzobjekten und die Injektion von Serviceklasseninstanzobjekten in erforderliche Komponenten verantwortlich.

• Erstellen Sie einen Injektorimport

  {ReflectiveInjector} aus „@angular/core“.
  //Serviceklasse class MailService {}
  //Erstellen Sie den Injektor und übergeben Sie die Dienstklasse. const injektor = ReflektierendeInjektor.resolveAndCreate([MailService])

• Rufen Sie das Dienstklasseninstanzobjekt im Injektor ab.

  const mailService = injektor.get(MailService)

• Das Dienstinstanzobjekt befindet sich im Singleton-Modus und Der Injektor befindet sich in Nachdem die Dienstinstanz erstellt wurde, wird sie zwischengespeichert

  const mailService1 = injector.get(MailService)
  const mailService2 = injektor.get(MailService)
  
  console.log(mailService1 === mailService2) // wahr,

• unterschiedliche Injektoren geben unterschiedliche Dienstinstanzobjekte zurück

  const injektor = ReflektierendeInjector.resolveAndCreate([MailService])
  const childInjector = injektor.resolveAndCreateChild([MailService])
  
  const mailService1 = injektor.get(MailService)
  const mailService2 = childInjector.get(MailService)
  
  console.log(mailService1 === mailService2) // Die Suche nach falschen

• Dienstinstanzen ähnelt der作用域链. Wenn die aktuelle Ebene gefunden werden kann, wechseln Sie zu Übergeordnetes Element zur Suche

  const injektor = ReflektierendeInjector.resolveAndCreate([ MailService])
  const childInjector = injektor.resolveAndCreateChild([])
  
  const mailService1 = injektor.get(MailService)
  const mailService2 = childInjector.get(MailService)
  
  console.log(mailService1 === mailService2) // true

2.2 Das Provider

• -Konfigurationsinjektorobjekt gibt die Dienstklasse zum Erstellen des Instanzobjekts und die Kennung für den Zugriff auf das Dienstinstanzobjekt an.

  const-Injektor = ReflektierendeInjector.resolveAndCreate([
    { Provide: MailService, useClass: MailService }
  ])

• Der Bezeichner für den Zugriff auf das abhängige Objekt kann auch ein String-Typ sein

  .
    { Provide: „mail“, useClass: MailService }
  ])
  const mailService = injektor.get("mail")

• useValue

  const injektor = ReflektierendeInjector.resolveAndCreate([
    {
      bereitstellen: „Config“,
      useValue: Object.freeze({
        APIKEY: „API1234567890“,
        APISCRET: „500-400-300“
      })
    }
  ])
  const Config = injektor.get("Config")

stellt eine lose Kopplungsbeziehung zwischen dem Instanzobjekt und der externen Referenz her. Das externe Objekt erhält das Instanzobjekt über den Bezeichner, solange der Bezeichner unverändert bleibt, egal wie der interne Code ist Änderungen haben keinen Einfluss auf das Äußere.