Angular의 구성요소 통신 및 종속성 주입을 이해하도록 안내합니다.-JS 튜토리얼-php.cn

Angular구성요소 간 통신 방법은 무엇인가요? 의존성 주입이란 무엇입니까? 다음 글에서는 컴포넌트 통신 방법에 대해 간략히 설명하고 의존성 주입에 대해 소개하겠습니다.

Angular의 구성요소 통신 및 종속성 주입을 이해하도록 안내합니다.

1. 컴포넌트 통신

1.1 데이터를 컴포넌트 내부로 전달

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

로그인 후 복사

// favorite.component.ts
import { Input } from &#39;@angular/core&#39;;

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

로그인 후 복사

참고: 속성 외부에 []를 추가하여 바인딩된 동적 값을 나타냅니다. .컴포넌트에 수신된 후에는 Boolean 유형입니다. []가 없으면 일반 값을 바인딩한다는 의미입니다. [관련 튜토리얼 권장 사항: "[] 表示绑定动态值，在组件内接收后是布尔类型，不加 [] 表示绑定普通值，在组件内接收后是字符串类型。【相关教程推荐：《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")

로그인 후 복사

useValueangular tutorial
"]

1.2 구성 요소가 외부로 데이터를 전달합니다

요구 사항: 하위 구성 요소의 버튼을 클릭하여 상위 구성 요소에 데이터를 전달합니다🎜

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

로그인 후 복사

rrreeerrreeerrreee🎜🎜2. 종속성 주입🎜🎜🎜🎜🎜2.1 개요🎜🎜🎜🎜종속성 주입( DI라고도 함)은 코드 간의 결합을 줄이는 데 사용되는 객체 지향 프로그래밍 원리 🎜rrreee🎜 EmailSender 클래스는 실행 시 MailService 클래스를 사용해야 하며, EmailSender 클래스는 MailService 클래스에 종속되고, MailService 클래스는 EmailSender 클래스의 종속성입니다. 🎜🎜위 작성 방법의 결합도가 너무 높아서 코드가 견고하지 않습니다. MailService 클래스가 매개변수 전달 방식을 변경하면 EmailSender 클래스의 쓰기 방법도 이에 따라 변경됩니다🎜rrreee🎜EmailSender를 인스턴스화할 때 class 생성자 생성자 매개변수 형식으로 클래스 내부에 종속성을 주입하는 것을 종속성 주입이라고 합니다. 🎜🎜종속성 주입은 코드 간의 결합을 줄이고 코드의 유지 관리성을 높입니다. MailService 클래스의 코드 변경 사항은 더 이상 EmailSender 클래스 🎜🎜🎜🎜2.2 🎜🎜DI 프레임워크 🎜🎜🎜🎜에 영향을 주지 않습니다. Angular에는 종속성 주입 구현 프로세스를 숨기는 자체 DI 프레임워크가 있습니다. 개발자는 복잡한 종속성 주입 기능을 사용하려면 매우 간단한 코드만 사용하면 됩니다. 🎜🎜Angular의 DI 프레임워크에는 네 가지 핵심 개념이 있습니다. 🎜

🎜종속성: 구성 요소가 의존하는 인스턴스 개체, 서비스 인스턴스 개체🎜🎜
🎜토큰: 서비스 인스턴스 개체의 식별 가져오기🎜🎜
🎜Injector code>: 서비스 클래스의 인스턴스 객체를 생성 및 유지하고 서비스 인스턴스 객체를 구성 요소에 주입하는 역할을 담당하는 인젝터입니다. 🎜🎜
🎜Provider: 인젝터의 객체를 구성하고 서비스 클래스를 지정하여 서비스 인스턴스 객체를 생성하고 인스턴스 객체의 식별자를 얻습니다. 🎜🎜🎜🎜🎜2.2.1 인젝터 인젝터🎜🎜🎜인젝터는 서비스 클래스 인스턴스 객체를 생성하고 서비스 클래스 인스턴스 객체를 필수 구성 요소에 주입하는 역할을 담당합니다🎜
- 🎜인젝터 만들기🎜rrreee🎜
- 🎜인젝터에서 서비스 클래스 인스턴스 객체 가져오기🎜rrreee🎜
- 🎜서비스 인스턴스 객체가 싱글톤 모드이고 인젝터가 서비스를 생성 중입니다. 인스턴스는 나중에 캐시됩니다🎜rrreee🎜
- 🎜인젝터마다 서로 다른 서비스 인스턴스 객체를 반환합니다🎜rrreee🎜
- 🎜서비스 인스턴스 검색은 함수 범위 체인과 유사합니다. 현재 수준을 찾을 수 있으면 현재를 사용하세요. level , 현재 레벨을 찾을 수 없으면 상위 레벨로 이동하여 검색🎜rrreee🎜🎜🎜🎜2.2.2 ProviderProvider🎜🎜
  - 🎜인젝터의 객체를 구성하고, 인스턴스 객체를 생성하기 위한 서비스 클래스와 서비스 인스턴스 객체에 액세스하기 위한 식별자를 지정합니다.🎜rrreee🎜
  - 🎜종속 객체에 액세스하기 위한 식별자는 문자열일 수도 있습니다. type🎜rrreee🎜
  - 🎜 useValue🎜rrreee🎜🎜🎜는 인스턴스 객체와 외부 참조 사이에 느슨한 결합 관계를 설정합니다. 식별자는 변경되지 않으며 내부 코드가 어떻게 변경되더라도 외부 세계에는 영향을 미치지 않습니다.🎜🎜더 보기 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜