第深入了解Angular中的依賴注入模式（玩法案例）模塊注入器：在@NgModule的元數(shù)據(jù)屬性里可以配置providers，還可以使用v6以后提供的@Injectable聲明provideIn聲明為模塊名、root等。（實(shí)際上在root根模塊之上還有兩個注入器，Platform和Null，這里不討論它們。）

元素注入器：在組件@Component的元數(shù)據(jù)屬性里可以配置providers，viewProviders，或者在指令的@Directive元數(shù)據(jù)里的providers.

另外，實(shí)際上@Injectable裝飾器除了用了聲明模塊注入器外，也可以聲明為元素注入器。更經(jīng)常會將其聲明為在root提供，以實(shí)現(xiàn)單例。它通過類自己集成元數(shù)據(jù)來避免模塊或者組件直接顯式聲明provider，這樣如果該類沒有任何組件指令服務(wù)等類注入它，就沒有代碼鏈接到該類型聲明，就可以被編譯器忽略，從而實(shí)現(xiàn)了搖樹。

還有一種提供方法是聲明InjectionToken的時(shí)候直接給出值。

這里給出這幾種方式的速寫模板：

@NgModule({providers:[

//模塊注入器

exportclassMyModule{}

@Component({providers:[

//元素注入器-組件

viewProviders:[

//元素注入器-組件視圖

exportclassMyComponent{}

@Directive({providers:[

//元素注入器-指令

exportclassMyDirective{}

@Injectable({

providedIn:root

exportclassMyService{}

exportconstMY_INJECT_TOKEN=newInjectionTokenMyClass(my-inject-token,{

providedIn:root,

factory:()={

returnnewMyClass();

});

提供依賴的位置不同的選擇會帶來一些差異，最終影響著包的大小，依賴的能被注入的范圍和依賴的生命周期。對于不同的場景，如單例（root），服務(wù)隔離（module），多重編輯窗（component）等都有不同的適用方案，應(yīng)當(dāng)選擇合理的位置，避免共享的信息不當(dāng)，或者代碼打包的冗余。

2.3多樣的值函數(shù)工具

如果只是提供實(shí)例的注入，那還顯示不出Angular框架依賴注入的靈活性。Angular提供了很多靈活的注入工具，useClass自動創(chuàng)建新實(shí)例，useValue使用靜態(tài)值，useExisting可以復(fù)用已有的實(shí)例，useFactory通過函數(shù)來構(gòu)造，搭配指定deps指定構(gòu)造函數(shù)參數(shù)，這些組合起來玩法可以非?；??？梢园肼方睾粋€類的token令牌替換成另一個自己準(zhǔn)備好的實(shí)例，可以造一個token先保存起來值或者實(shí)例，然后再在后面需要用到的時(shí)候重新替換回去，甚至可以用工廠函數(shù)返回實(shí)例的局部信息實(shí)現(xiàn)映射成另一個對象或者屬性值。這里的玩法會通過后面的案例進(jìn)行闡述，這里就先不展開。官網(wǎng)也有很多例子可以參考。

2.4注入消費(fèi)和裝飾器

Angular中的注入可以在構(gòu)造函數(shù)constructor內(nèi)注入，也可以拿到注入器injector通過get方法獲取已有的注入元素。

Angular支持在注入的時(shí)候增加裝飾器進(jìn)行標(biāo)記，

@Host()來限制冒泡

@Self()限制為元素自身

@SkipSelf()限制為元素自身以上

@Optional()標(biāo)記為可選

@Inject()限制為自定義Token令牌

這里有一篇文章《@Selfor@Optional@HostThevisualguidetoAngularDIdecorators.》非常生動形象地展示父子組件間如果使用了不同的裝飾器，最后會命中的實(shí)例有什么不同。

圖3不同注入裝飾器的篩選結(jié)果

2.4.1補(bǔ)充：宿主視圖和@Host

這幾個裝飾器里面，最不好理解的可能就是@Host了，這里補(bǔ)充一些@Host的具體說明。官方對@Host裝飾器的解釋是

...retrieveadependencyfromanyinjectoruntilreachingthehostelement

Host在這里是宿主的意思，@Host這個裝飾器將會限定查詢的范圍在宿主元素(hostelement)以內(nèi)。什么是宿主元素呢？假如B組件是A組件模板使用的組件，那么A組件實(shí)例就是B組件實(shí)例的宿主元素。組件模板產(chǎn)生的內(nèi)容稱為View（視圖），同一個View對于不同組件來說可能是不同視圖。如果A組件在自己的template范圍內(nèi)使用B組件（見圖4），A的模板內(nèi)容形成的視圖（紅框部分）對A組件來說就是A的內(nèi)嵌視圖，B組件在這個視圖內(nèi)，所以對B來說這個視圖就是B的宿主視圖。裝飾器@Host就是限定搜索范圍為宿主視圖之內(nèi)，找不到不會再進(jìn)行冒泡了。

圖4內(nèi)嵌視圖和宿主視圖

3案例和玩法

下面我們通過真實(shí)的案例，來看看依賴注入到底是怎么運(yùn)轉(zhuǎn)起來的，怎么排查錯誤，以及還能怎么玩。

3.1案例一：模態(tài)窗創(chuàng)建動態(tài)組件，找不到組件問題

DevUI組件庫的模態(tài)窗組件提供了一個服務(wù)ModalService，該服務(wù)可以彈出一個模態(tài)框，而且可以配置為自定義的組件。業(yè)務(wù)的同學(xué)經(jīng)常在使用這個組件的時(shí)候報(bào)錯，包找不到自定義的組件。

比如以下的報(bào)錯：

圖5使用ModalService的時(shí)候創(chuàng)建引用EditorX的組件的報(bào)錯找不到對應(yīng)服務(wù)提供商

分析ModalService是如何創(chuàng)建自定義組件的，ModalService源碼Open函數(shù)第52行和第95行。能看到，componentFactoryResolver如果沒有傳入就使用ModalService注入的componentFactoryResolver。而大多數(shù)情況下，業(yè)務(wù)會在根模塊引入一次DevUI