如何理解Angular中的組件通訊和依賴注入

這篇文章給大家介紹如何理解Angular中的組件通訊和依賴注入，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

Angular組件間怎么進行通訊？依賴注入是什么？

1.  組件通訊

1.1  向組件內部傳遞數據

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

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

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

注意：在屬性的外面加 [] 表示綁定動態值，在組件內接收后是布爾類型，不加 [] 表示綁定普通值，在組件內接收后是字符串類型。【相關教程推薦：《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")

• useValue

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

將實例對象和外部的引用建立了松耦合關系，外部通過標識獲取實例對象，只要標識保持不變，內部代碼怎么變都不會影響到外部

關于如何理解Angular中的組件通訊和依賴注入就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。