真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Angular依賴注入怎么實(shí)現(xiàn)

今天小編給大家分享一下Angular依賴注入怎么實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。

站在用戶的角度思考問(wèn)題,與客戶深入溝通,找到尼木網(wǎng)站設(shè)計(jì)與尼木網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:成都網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋尼木地區(qū)。

Angular依賴注入怎么實(shí)現(xiàn)

依賴注入是什么

依賴注入簡(jiǎn)稱DI,是面向?qū)ο缶幊讨械囊环N設(shè)計(jì)原則,用來(lái)減少代碼之間的耦合度。

我們先來(lái)看一段代碼

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

假設(shè)我們用一個(gè)視頻類,它其中有一個(gè)方法 getScreenshot 獲取截圖,在實(shí)例化視頻類的時(shí)候,需要傳入一個(gè)視頻 url 這樣的參數(shù)?,F(xiàn)在有一個(gè)筆記類,它需要去調(diào)用視頻類下的截圖方法,那么我們就可以說(shuō),筆記類是依賴于視頻類的。所以在筆記類的內(nèi)部,我們就需要去實(shí)例化視頻類,這樣才能在筆記類中獲取視頻類的實(shí)例對(duì)象,并且調(diào)用它里面的截圖方法。

上面代碼的耦合度過(guò)高,并不推薦使用,比方說(shuō)如果Video的視頻地址換了一個(gè),那么在Note中就需要去改變傳入的視頻url,這樣假設(shè)要是有更多的類依賴于視頻類,那么一旦做出更改,那么所有地方都要跟著改變,非常的不方便。

接下來(lái)利用依賴注入解決上面的問(wèn)題:

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

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

我們?cè)陬惖耐獠咳?shí)例化視頻類,并且通過(guò)參數(shù)傳遞的方式把實(shí)例傳遞給了筆記類,通過(guò)這樣的方式就能夠成功解決耦合度過(guò)高的問(wèn)題,我們把通過(guò)參數(shù)傳遞實(shí)例的這種方式稱為:注入。

優(yōu)點(diǎn)

通過(guò)依賴注入降低了代碼之間的耦合度,增加了代碼的可維護(hù)性。視頻類中的代碼更改也不會(huì)去影響到筆記類了。

Angular的DI框架

在上述實(shí)現(xiàn)的過(guò)程當(dāng)中,還是有著一個(gè)不是特別理想的地方,就是我們需要在類的外部去實(shí)例化視頻類,雖然只有這一處,但是我們還是希望視頻類的內(nèi)部再怎么更改,都不會(huì)影響外部代碼。

在 Angular 提供的 DI 框架中,我們就不需要自己去做視頻類的實(shí)例化操作,它將實(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í),在Angular會(huì)維護(hù)很多的實(shí)例對(duì)象,在我們需要獲取的時(shí)候,就需要通過(guò)標(biāo)識(shí)去獲取

  • Injector:注入器,負(fù)責(zé)創(chuàng)建維護(hù)服務(wù)類的實(shí)例對(duì)象,并向組件中注入服務(wù)實(shí)例對(duì)象,通過(guò)參數(shù)的方式傳遞給各個(gè)組件

  • Procider:對(duì)象,用于配置注入器,指定創(chuàng)建服務(wù)實(shí)例對(duì)象的服務(wù)類和獲取實(shí)例對(duì)象的標(biāo)識(shí)

Injector注入器

我們先通過(guò)Angular提供的基本語(yǔ)法來(lái)創(chuàng)建一個(gè)注入器

1、創(chuàng)建注入器

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

引入ReflectiveInjector其中resolveAndCreate方法用于創(chuàng)建注入器,它接收一個(gè)數(shù)組,數(shù)組中就是需要?jiǎng)?chuàng)建實(shí)例對(duì)象的類,這個(gè)方法會(huì)返回一個(gè)注入器 2. 獲取注入器中的服務(wù)類實(shí)例對(duì)象

const video = injector.get(Video)

在injector下有一個(gè)get方法,用于傳入標(biāo)識(shí)并且獲取實(shí)例對(duì)象,默認(rèn)標(biāo)識(shí)就是服務(wù)類的名稱也就是Video

這樣我們就能夠獲取到Video的實(shí)例對(duì)象了,Angular給我們提供的這套DI框架使得我們不需要去手動(dòng)的實(shí)例化某一個(gè)類來(lái)獲得它的實(shí)例對(duì)象,它會(huì)來(lái)幫我們完成。

2、服務(wù)的實(shí)例對(duì)象為單例模式,注入器在創(chuàng)建服務(wù)實(shí)例后悔對(duì)其進(jìn)行緩存

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

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

也就是說(shuō),無(wú)論通過(guò)框架獲取多少次實(shí)例對(duì)象,他返回的都是同一個(gè)實(shí)例對(duì)象

3、但是我們可以通過(guò)創(chuàng)建多個(gè)注入器,不同的注入器返回的同一個(gè)服務(wù)實(shí)例化的對(duì)象不是同一個(gè)

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、注入器上面存在一個(gè)創(chuàng)建子級(jí)注入器的方法為 resolveAndCreateChild,這個(gè)方法會(huì)創(chuàng)建一個(gè)子級(jí)注入器,父級(jí)注入器和子級(jí)注入器之間的關(guān)系類似于js的作用域鏈,當(dāng)前注入器查找不到就會(huì)去父級(jí)注入器查找,比如:

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

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

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

像上面這段代碼,我們?cè)趧?chuàng)建子級(jí)注入器的時(shí)候,不傳遞參數(shù),但是在子級(jí)注入器實(shí)例化的時(shí)候,由于自身不存在 Video 這個(gè)服務(wù),它就會(huì)去父級(jí)查找,當(dāng)然,就找到了父級(jí)的 Video 這個(gè)服務(wù)并且實(shí)例化,所以后面的兩個(gè)實(shí)例化對(duì)象相等。

以上就是“Angular依賴注入怎么實(shí)現(xiàn)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。


名稱欄目:Angular依賴注入怎么實(shí)現(xiàn)
網(wǎng)頁(yè)URL:http://weahome.cn/article/poohij.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部