這篇“angular依賴(lài)注入實(shí)例分析”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“angular依賴(lài)注入實(shí)例分析”文章吧。

創(chuàng)新互聯(lián)專(zhuān)注于濮陽(yáng)縣網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供濮陽(yáng)縣營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，濮陽(yáng)縣網(wǎng)站制作、濮陽(yáng)縣網(wǎng)頁(yè)設(shè)計(jì)、濮陽(yáng)縣網(wǎng)站官網(wǎng)定制、微信小程序開(kāi)發(fā)服務(wù)，打造濮陽(yáng)縣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供濮陽(yáng)縣網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

angular中的依賴(lài)注入（DI）

1、概述

依賴(lài)注入 ( Dependency Injection ) 簡(jiǎn)稱(chēng)DI，是面向?qū)ο?/code>編程中的一種設(shè)計(jì)原則，用來(lái)減少代碼之間的耦合度。

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

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

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

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

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

2、DI 框架

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

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

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

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

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

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

2.1 注入器 Injectors

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

• 創(chuàng)建注入器

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

• 獲取注入器中的服務(wù)類(lèi)實(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í)例的查找類(lèi)似函數(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ù)類(lèi)和訪(fǎng)問(wèn)服務(wù)實(shí)例對(duì)象的標(biāo)識(shí)。

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

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

  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ì)影響到外部。

以上就是關(guān)于“angular依賴(lài)注入實(shí)例分析”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。