angular學習之聊聊依賴注入

什麼是依賴注入？這篇文章帶大家了解一下angular中的依賴注入（DI），詳細介紹AngularDI框架的兩個核心概念：注入器 Injectors和提供者 Provider，希望對大家有幫助！

angular中的依賴注入（DI）

1、概述

依賴注入( Dependency Injection ) 簡稱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

• 服務實例的查找類似函數作用域鏈，當前級別可以找到就使用當前級別，當前級別找不到去父級中查找

  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 提供者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學習之聊聊依賴注入的詳細內容。更多資訊請關注PHP中文網其他相關文章！