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 類改變了參數(shù)的傳遞方式，在 EmailSender 類中的寫法也要跟著改變。

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

在實例化 EmailSender 類時將它的依賴項通過 constructor 構(gòu)造函數(shù)參數(shù)的形式注入到類的內(nèi)部，這種寫法就是依賴注入。

通過依賴注入降了代碼之間的耦合度，增加了代碼的可維護性。MailService 類中代碼的更改再也不會影響 EmailSender 類。

2、DI 框架

Angular 有自己的 DI 框架，它將實現(xiàn)依賴注入的過程隱藏了，對于開發(fā)者來說只需使用很簡單的代碼就可以使用復雜的依賴注入功能。

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

• Dependency：組件要依賴的實例對象，服務(wù)實例對象

• Token：獲取服務(wù)實例對象的標識

• Injector：注入器，負責創(chuàng)建維護服務(wù)類的實例對象并向組件中注入服務(wù)實例對象（管理服務(wù)對象的創(chuàng)建和獲取）。

• Provider：配置注入器的對象，指定創(chuàng)建服務(wù)實例對象的服務(wù)類和獲取實例對象的標識。（Provider：提供程序）

2.1 注入器 Injectors

注入器負責創(chuàng)建服務(wù)類實例對象，并將服務(wù)類實例對象注入到需要的組件中。

• 創(chuàng)建注入器

  import { ReflectiveInjector } from "@angular/core" // 服務(wù)類 class MailService {} // 創(chuàng)建注入器并傳入服務(wù)類 const injector = ReflectiveInjector.resolveAndCreate([MailService])

• 獲取注入器中的服務(wù)類實例對象

  const mailService = injector.get(MailService)

• 服務(wù)實例對象為單例模式，注入器在創(chuàng)建服務(wù)實例后會對其進行緩存

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

• 不同的注入器返回不同的服務(wù)實例對象

  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

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

  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

• 配置注入器的對象，指定了創(chuàng)建實例對象的服務(wù)類和訪問服務(wù)實例對象的標識。

  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")

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