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 類運(yùn)行時(shí)要使用 MailService 類，EmailSender 類依賴 MailService 類，MailService 類是 EmailSender 類的依賴項(xiàng)。

以上寫法的耦合度太高，代碼并不健壯。如果 MailService 類改變了參數(shù)的傳遞方式，在 EmailSender 類中的寫法也要跟著改變。

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

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

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

2、DI 框架

Angular 有自己的 DI 框架，它將實(shí)現(xiàn)依賴注入的過(guò)程隱藏了，對(duì)于開(kāi)發(fā)者來(lái)說(shuō)只需使用很簡(jiǎn)單的代碼就可以使用復(fù)雜的依賴注入功能。

在 Angular 的 DI 框架中有四個(gè)核心概念：

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

• Token：獲取服務(wù)實(shí)例對(duì)象的標(biāo)識(shí)

• Injector：注入器，負(fù)責(zé)創(chuàng)建維護(hù)服務(wù)類的實(shí)例對(duì)象并向組件中注入服務(wù)實(shí)例對(duì)象（管理服務(wù)對(duì)象的創(chuàng)建和獲?。?/p>

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

2.1 注入器 Injectors

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

• 創(chuàng)建注入器

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

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

  const mailService = injector.get(MailService)

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

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

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

  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í)例的查找類似函數(shù)作用域鏈，當(dāng)前級(jí)別可以找到就使用當(dāng)前級(jí)別，當(dāng)前級(jí)別找不到去父級(jí)中查找

  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

• 配置注入器的對(duì)象，指定了創(chuàng)建實(shí)例對(duì)象的服務(wù)類和訪問(wèn)服務(wù)實(shí)例對(duì)象的標(biāo)識(shí)。

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

• 訪問(wèn)依賴對(duì)象的標(biāo)識(shí)也可以是字符串類型

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

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