手把手帶你瞭解Angular中的依賴注入

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

最近在Angular專案中經常能碰到依賴注入這個關鍵詞，但是始終不理解它是怎麼實現的，在Angular的官網上也只有關於它的使用，詳細點的原理並沒有說明，所以就下來我們就從原生的寫法來講解一下，依賴注入是用來解決什麼問題的，他用js應該怎麼去表現。【相關教學推薦：《》】

依賴注入是什麼

依賴注入簡稱DI，是物件導向程式設計中的一種設計原則，用來減少程式碼之間的耦合度。

我們先來看一段程式碼

class Video{
    constructor(url){}
}

class Note{
    video: Video
    constructor(){
        this.video = new Video("https://aaaaa.mp4")
    }
    
    getScreenshot(){
        this.video.getScreenshot()
    }
}

const note = new Note()
note.getScreenshot()

假設我們用一個視訊類，它其中有一個方法 getScreenshot 獲取截圖，在範例化視訊類的時候，需要傳入一個視訊 url 這樣的引數。現在有一個筆記類，它需要去呼叫視訊類下的截圖方法，那麼我們就可以說，筆記類是依賴於視訊類的。所以在筆記類的內部，我們就需要去範例化視訊類，這樣才能在筆記類中獲取視訊類的範例物件，並且呼叫它裡面的截圖方法。

上面程式碼的耦合度過高，並不推薦使用，比方說如果Video的視訊地址換了一個，那麼在Note中就需要去改變傳入的視訊url，這樣假設要是有更多的類依賴於視訊類，那麼一旦做出更改，那麼所有地方都要跟著改變，非常的不方便。

接下來利用依賴注入解決上面的問題：

class Note{
    video: Video
    constructor(video: Video){
        this.video = Video;
    }
}

const video = new Video("https://aaaaa.mp4")
const note = new Note(video)

我們在類的外部去範例化視訊類，並且通過引數傳遞的方式把範例傳遞給了筆記類，通過這樣的方式就能夠成功解決耦合度過高的問題，我們把通過引數傳遞範例的這種方式稱為：注入。

優點

通過依賴注入降低了程式碼之間的耦合度，增加了程式碼的可維護性。視訊類中的程式碼更改也不會去影響到筆記類了。

Angular的DI框架

在上述實現的過程當中，還是有著一個不是特別理想的地方，就是我們需要在類的外部去範例化視訊類，雖然只有這一處，但是我們還是希望視訊類的內部再怎麼更改，都不會影響外部程式碼。

在 Angular 提供的 DI 框架中，我們就不需要自己去做視訊類的範例化操作，它將實現依賴注入的過程隱藏了，對於開發者來說，只需要使用很簡單的程式碼就可以使用複雜的依賴注入功能。

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

• Dependency：元件要依賴的範例物件，服務範例物件

• Token：獲取服務範例物件的標識，在Angular會維護很多的範例物件，在我們需要獲取的時候，就需要通過標識去獲取

• Injector：注入器，負責建立維護服務類的範例物件，並向元件中注入服務範例物件，通過引數的方式傳遞給各個元件

• Procider：物件，用於設定注入器，指定建立服務範例物件的服務類和獲取範例物件的標識

Injector注入器

我們先通過Angular提供的基本語法來建立一個注入器

1、建立注入器

import { ReflectiveInjector } from "@angular/core"
//服務類
class Video{}
//建立注入器並傳入服務類
const injector = ReflectiveInjector.resolveAndCreate([ Video ])

引入ReflectiveInjector其中resolveAndCreate方法用於建立注入器，它接收一個陣列，陣列中就是需要建立範例物件的類，這個方法會返回一個注入器 2. 獲取注入器中的服務類範例物件

const video = injector.get(Video)

在injector下有一個get方法，用於傳入標識並且獲取範例物件，預設標識就是服務類的名稱也就是Video

這樣我們就能夠獲取到Video的範例物件了，Angular給我們提供的這套DI框架使得我們不需要去手動的範例化某一個類來獲得它的範例物件，它會來幫我們完成。

2、服務的範例物件為單例模式，注入器在建立服務範例後悔對其進行快取

const video1 = injector.get(Video)
const video2 = injector.get(Video)

console.log(video1 === video1)//true

也就是說，無論通過框架獲取多少次範例物件，他返回的都是同一個範例物件

3、但是我們可以通過建立多個注入器，不同的注入器返回的同一個服務範例化的物件不是同一個

const injector1 = ReflectiveInjector.resolveAndCreate([ Video ])
const injector2 = ReflectiveInjector.resolveAndCreate([ Video ])

const video1 = injector1.get(Video)
const video2 = injector2.get(Video)

console.log(video1 === video1)//false

4、注入器上面存在一個建立子級注入器的方法為 resolveAndCreateChild，這個方法會建立一個子級注入器，父級注入器和子級注入器之間的關係類似於js的作用域鏈，當前注入器查詢不到就會去父級注入器查詢，比如：

const injector = ReflectiveInjector.resolveAndCreate([ Video ])
const injectorChild = injector.resolveAndCreateChild([])

const video1 = injector.get(Video)
const video2 = injectorChild.get(Video)

console.log(video1 === video1)//true

像上面這段程式碼，我們在建立子級注入器的時候，不傳遞引數，但是在子級注入器範例化的時候，由於自身不存在 Video 這個服務，它就會去父級查詢，當然，就找到了父級的 Video 這個服務並且範例化，所以後面的兩個範例化物件相等

總結

本文介紹了依賴注入解決的問題和它原生的寫法是什麼用的，並且介紹了Angular提供給我們的DI框架，用它提供給我們的簡單api實現了範例化的過程，並且講解了注入器，也是會分層級的，能提供給我們更好地一個專案設計方式。之後有機會再來講解一下provider以及更多的擴充套件。

更多程式設計相關知識，請存取：！！

以上就是手把手帶你瞭解Angular中的依賴注入的詳細內容，更多請關注TW511.COM其它相關文章！