Angular中的依賴注入是什么及怎么應用

本篇內容介紹了“Angular中的依賴注入是什么及怎么應用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

依賴注入是什么

依賴注入簡稱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中的依賴注入是什么及怎么應用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！