Machen Sie sich mit der Komponentenkommunikation und der Abhängigkeitsinjektion in Angular vertraut

AngularWie kommuniziert man zwischen Komponenten? Was ist Abhängigkeitsinjektion? Der folgende Artikel gibt Ihnen einen kurzen Überblick über die Komponentenkommunikationsmethode und stellt die Abhängigkeitsinjektion vor. Ich hoffe, er wird Ihnen hilfreich sein! 1. Komponentenkommunikation . Nach dem Empfang in der Komponente handelt es sich um einen booleschen Typ. Ohne [] bedeutet dies, dass er einen normalen Wert bindet. [Verwandte Tutorial-Empfehlungen: „

“]

1.2 Komponenten geben Daten nach außen weiter

Anforderungen: Übergeben Sie Daten an die übergeordnete Komponente, indem Sie auf die Schaltfläche in der untergeordneten Komponente klicken

<app-favorite [isFavorite]="true"></app-favorite>

// favorite.component.ts
import { Input } from '@angular/core';

export class FavoriteComponent {
    @Input() isFavorite: boolean = false;
}

<!-- 子组件模板 -->
<button (click)="onClick()">click</button>

// 子组件类
import { EventEmitter, Output } from "@angular/core"

export class FavoriteComponent {
  @Output() change = new EventEmitter()
  onClick() {
    this.change.emit({ name: "张三" })
  }
}

[] 表示绑定动态值，在组件内接收后是布尔类型，不加 [] 表示绑定普通值，在组件内接收后是字符串类型。【相关教程推荐：《angular教程》】

1.2 组件向外部传递数据

需求：在子组件中通过点击按钮将数据传递给父组件

<!-- 父组件模板 -->
<app-favorite (change)="onChange($event)"></app-favorite>

// 父组件类
export class AppComponent {
  onChange(event: { name: string }) {
    console.log(event)
  }
}

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)

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

2. 依赖注入

2.1 概述

依赖注入 ( Dependency Injection ) 简称DI，是面向对象编程中的一种设计原则，用来减少代码之间的耦合度

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

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

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

const mailService = injector.get(MailService)

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

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

2.2 DI 框架

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

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

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

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

• Injector：注入器，负责创建维护服务类的实例对象并向组件中注入服务实例对象。

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

2.2.1 注入器 Injectors

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

• 创建注入器

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

  Nach dem Login kopieren

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

  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

  Nach dem Login kopieren

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

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

  Nach dem Login kopieren

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

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

  Nach dem Login kopieren

• 服务实例的查找类似函数作用域链，当前级别可以找到就使用当前级别，当前级别找不到去父级中查找

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

  Nach dem Login kopieren

2.2.2 提供者 Provider

• 配置注入器的对象，指定了创建实例对象的服务类和访问服务实例对象的标识

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

  Nach dem Login kopieren

• 访问依赖对象的标识也可以是字符串类型

  rrreee

• useValue

  2.1 Übersicht
Abhängigkeitsinjektion ( Dependency Injection ), auch DI genannt, ist ein Design in Prinzip der objektorientierten Programmierung, das verwendet wird, um die Kopplung zwischen Codes zu reduzieren

rrreee Die EmailSender-Klasse muss bei der Ausführung die MailService-Klasse und den EmailSenderverwenden >-Klasse hängt von der Klasse MailService ab, die Klasse MailService ist eine Abhängigkeit der Klasse EmailSender.

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 entsprechend. 🎜rrreee🎜Bei der Instanziierung des EmailSender Klasse Das Einfügen ihrer Abhängigkeiten in das Innere der Klasse in Form von constructor-Konstruktorparametern wird als Abhängigkeitsinjektion bezeichnet. 🎜🎜Abhängigkeitsinjektion reduziert die Kopplung zwischen Codes und erhöht die Wartbarkeit des Codes. Codeänderungen in der Klasse MailService wirken sich nicht mehr auf die Klasse EmailSender 🎜🎜🎜🎜2.2 🎜🎜DI-Framework 🎜🎜🎜🎜 aus Angular verfügt über ein eigenes DI-Framework, das den Prozess der Implementierung der Abhängigkeitsinjektion verbirgt. Entwickler müssen nur sehr einfachen Code verwenden, um komplexe Abhängigkeitsinjektionsfunktionen zu verwenden. 🎜🎜Es gibt vier Kernkonzepte im DI-Framework von Angular: 🎜
• 🎜Abhängigkeit: Das Instanzobjekt, von dem die Komponente abhängt, das Dienstinstanzobjekt🎜🎜
• 🎜Token: Ruft die Identifikation des Dienstinstanzobjekts ab🎜🎜
• 🎜Injector code>: Injector, verantwortlich für die Erstellung und Verwaltung von Instanzobjekten von Serviceklassen und das Einfügen von Serviceinstanzobjekten in Komponenten. 🎜🎜
• 🎜Provider: Konfigurieren Sie das Objekt des Injektors, geben Sie die Dienstklasse an, um das Dienstinstanzobjekt zu erstellen und die Kennung des Instanzobjekts abzurufen. 🎜🎜🎜🎜🎜2.2.1 Injektoren Injektoren🎜🎜🎜Der Injektor ist für die Erstellung von Serviceklasseninstanzobjekten und das Einfügen von Serviceklasseninstanzobjekten in erforderliche Komponenten verantwortlich🎜
  • 🎜Erstellen Sie den Injektor🎜rrreee🎜
  • 🎜Holen Sie sich das Dienstklasseninstanzobjekt im Injektor🎜rrreee🎜
  • 🎜Das Dienstinstanzobjekt befindet sich im Singleton-Modus und der Injektor erstellt den Dienst Die Instanz wird anschließend zwischengespeichert Wenn die aktuelle Ebene nicht gefunden werden kann, gehen Sie zur übergeordneten Ebene, um zu suchen🎜🎜🎜🎜2.2.2 ProviderProvider🎜🎜
    • 🎜Konfigurieren Sie das Objekt des Injektors und geben Sie die Dienstklasse zum Erstellen des Instanzobjekts und den Bezeichner für den Zugriff auf das Dienstinstanzobjekt an🎜rrreee🎜
    • 🎜Der Bezeichner für den Zugriff auf das abhängige Objekt kann auch ein sein Zeichenfolgentyp🎜rrreee🎜
    • 🎜 useValue🎜rrreee🎜🎜🎜 stellt eine lose Kopplungsbeziehung zwischen dem Instanzobjekt und der externen Referenz her. Das externe Objekt erhält das Instanzobjekt über den Bezeichner Die Kennung bleibt unverändert, egal wie sich der interne Code ändert, sie hat keine Auswirkungen auf die Außenwelt🎜🎜Weitere Informationen zu Programmierkenntnissen finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonMachen Sie sich mit der Komponentenkommunikation und der Abhängigkeitsinjektion in Angular vertraut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!