Beim Angular Learning geht es um die Abhängigkeitsinjektion

Was ist Abhängigkeitsinjektion? Dieser Artikel führt Sie durch die Abhängigkeitsinjektion (DI) in Angular und stellt die beiden Kernkonzepte des AngularDI-Frameworks im Detail vor: Injektoren und Provider. Ich hoffe, er wird Ihnen hilfreich sein!

Abhängigkeitsinjektion (DI) im Winkel

1. Übersicht

Abhängigkeitsinjektion (Dependency Injection), bezeichnet als DI, ist object- orientierter Code>Ein Designprinzip in der Programmierung, das verwendet wird, um die 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

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

  zwischen Codes zu reduzieren. [Verwandte Tutorial-Empfehlung: „
Angular-Tutorial

“]

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

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

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

Die EmailSender-Klasse muss beim Ausführen die MailService-Klasse verwenden. Die EmailSender-Klasse hängt von der MailService-Klasse ab, und die MailService-Klasse ist eine Abhängigkeit von 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.

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

• Fügen Sie beim Instanziieren der EmailSender-Klasse ihre Abhängigkeiten in Form von Konstruktor-Konstruktorparametern in das Innere der Klasse ein. Diese Schreibweise ist Abhängigkeitsinjektion.

• Durch die Abhängigkeitsinjektion wird die Kopplung zwischen Codes verringert und die Wartbarkeit des Codes erhöht. 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-Framework, das den Abhängigkeitsinjektionsprozess ausblendet. Für Entwickler ist dies nur mit der Funktion „Komplexe Abhängigkeitsinjektion“ möglich mit sehr einfachem Code verwendet werden.

Es gibt vier Kernkonzepte im DI-Framework von Angular:

Abhängigkeit: Instanzobjekte, von denen Komponenten abhängen, Dienstinstanzobjekte🎜🎜🎜🎜Token: Holen Sie sich das Identität des Dienstinstanzobjekts🎜🎜🎜🎜Injektor: Injektor, verantwortlich für die Erstellung und Pflege des Instanzobjekts der Dienstklasse und die Injektion Dienst in das Instanzobjekt der Komponente (verwaltet die Erstellung und Erfassung von Dienstobjekten). 🎜🎜🎜🎜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🎜🎜🎜Injektoren sind für die Erstellung von Serviceklasseninstanzobjekten und die Injektion von Serviceklasseninstanzobjekten in erforderliche Komponenten verantwortlich. 🎜🎜🎜🎜Erstellen Sie den Injektor 🎜Verschiedene Injektoren geben unterschiedliche Serviceinstanzobjekte zurück🎜🎜🎜Die Suche nach Serviceinstanzen ähnelt der Funktion scope chain. Wenn die aktuelle Ebene gefunden werden kann, verwenden Sie die aktuelle Ebene nicht gefunden werden kann, gehen Sie zur übergeordneten Ebene. Suchen Sie das 🎜

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

🎜🎜🎜🎜2.2 Provider 🎜🎜🎜🎜🎜-Objekt, das den Injektor konfiguriert, und geben Sie die Dienstklasse zum Erstellen des Instanzobjekts und die Kennung für den Zugriff auf das Dienstinstanzobjekt an. 🎜

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

🎜🎜🎜Der Bezeichner für den Zugriff auf abhängige Objekte kann auch vom Typ String sein. 🎜rrreee🎜🎜🎜useValue🎜🎜🎜 stellt eine lose Kopplungsbeziehung zwischen dem Instanzobjekt und der externen Referenz her Die Kennung, solange die Kennung erhalten bleibt. Unabhängig davon, wie sich der interne Code ändert, hat dies keine Auswirkungen auf die Außenwelt. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideos🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonBeim Angular Learning geht es um die Abhängigkeitsinjektion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!