Vous amener à comprendre la communication des composants et l'injection de dépendances dans Angular

AngularComment communiquer entre composants ? Qu’est-ce que l’injection de dépendances ? L'article suivant vous donnera une brève compréhension de la méthode de communication des composants et présentera l'injection de dépendances. J'espère qu'il vous sera utile !

1. Communication du composant

1.1 Transmettre les données à l'intérieur du composant

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

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

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

Remarque : ajoutez [] à l'extérieur de l'attribut pour indiquer des valeurs dynamiques de liaison. .Après avoir été reçu dans le composant, c'est un type booléen.Sans [], cela signifie lier une valeur normale.Après avoir été reçu dans le composant, c'est un type chaîne. [Recommandations de didacticiel associées : "[] 表示绑定动态值，在组件内接收后是布尔类型，不加 [] 表示绑定普通值，在组件内接收后是字符串类型。【相关教程推荐：《angular教程》】

1.2  组件向外部传递数据

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

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

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

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

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

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

---

2.   依赖注入

2.1  概述

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

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.2  DI 框架

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

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

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

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

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

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

2.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

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

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

2.2.2  提供者 Provider

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

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

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

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

• useValueTutoriel angulaire

  "]

1.2 Les composants transmettent des données à l'extérieur

Exigences : Transmettez les données au composant parent en cliquant sur le bouton dans le composant enfant🎜

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

rrreeerrreeerrreee🎜🎜2. Injection de dépendances🎜🎜🎜🎜🎜2.1 Présentation🎜🎜🎜🎜L'injection de dépendances ( Injection de dépendances), appelée DI, est une conception en programmation orientée objet Principe, utilisé pour réduire le couplage entre les codes 🎜rrreee🎜 La classe EmailSender doit utiliser la classe MailService lors de son exécution, et la classe EmailSender dépend de la classe MailService, 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 change la façon dont les paramètres sont transmis, la méthode d'écriture dans la classe EmailSender changera également en conséquence🎜rrreee🎜Lors de l'instanciation de EmailSender class L'injection de ses dépendances à l'intérieur de la classe sous la forme de paramètres de constructeur constructor est appelée 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'affecteront plus la classe EmailSender 🎜🎜🎜🎜2.2 🎜🎜framework DI 🎜🎜🎜🎜 Angular possède son propre framework DI, qui cache le processus d'implémentation de l'injection de dépendances. Les développeurs n'ont besoin que d'utiliser un code très simple pour utiliser des fonctions d'injection de dépendances complexes. 🎜🎜Il y a quatre concepts fondamentaux dans le cadre DI de Angular : 🎜

• 🎜Dépendance : L'objet d'instance dont dépend le composant, l'objet d'instance de service🎜🎜
• 🎜Jeton : Obtenez l'identification de l'objet d'instance de service🎜🎜
• 🎜Injecteur code> : Injecteur, responsable de la création et de la maintenance des objets d'instance des classes de service et de l'injection d'objets d'instance de service dans les composants. 🎜🎜
• 🎜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. 🎜🎜🎜🎜🎜2.2.1 Injecteurs Injecteurs🎜🎜🎜L'injecteur est responsable 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🎜rrreee🎜
  • 🎜Obtenez l'objet d'instance de classe de service dans l'injecteur🎜rrreee🎜
  • 🎜L'objet d'instance de service est en mode singleton et l'injecteur crée le service l'instance sera ensuite mise en cache🎜rrreee🎜
  • 🎜Différents injecteurs renvoient différents objets d'instance de service🎜rrreee🎜
  • 🎜La recherche d'instances de service est similaire à la chaîne de portée de fonction Si le niveau actuel peut être trouvé, utilisez le niveau actuel. niveau , Si le niveau actuel est introuvable, accédez au niveau parent pour trouver 🎜rrreee🎜🎜🎜🎜2.2.2 ProviderProvider🎜🎜
    • 🎜Configurez l'objet de l'injecteur, en spécifiant la classe de service pour créer l'objet instance et l'identifiant pour accéder à l'objet instance de service🎜rrreee🎜
    • 🎜L'identifiant pour accéder à l'objet dépendant peut également être une chaîne type🎜rrreee🎜
    • 🎜 useValue🎜rrreee🎜🎜🎜 établit une relation de couplage lâche entre l'objet instance et la référence externe. L'objet externe obtient l'objet instance via l'identifiant. l'identifiant reste inchangé, quelle que soit la façon dont le code interne change, cela n'affectera pas le monde extérieur🎜🎜Plus Pour des connaissances liées à la programmation, veuillez visiter : 🎜Vidéo 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!