依賴注入和動態組件的WWH（What Why How）

動態組件

問題1：動態組件和咱們寫的ngIf選擇器有啥區別而且優點在哪裏？

模板選擇器直接實例化組件：

解釋：根據已建立的組件工廠進行組件實例化，無須動態生成宿主元素（標籤）

 

動態組件（工廠模式實例化組件）

解釋：根據已經聲明的組件（靜態類d.ts）建立組件工廠再進行組件實例化，宿主元素（標籤）經過Host文件生成

 

答：

先說場景：

（1）NG官網的例子一個廣告位須要多個不一樣佈局的頁面進行切換，若是用ngIf,你就只能寫死多個模板在父組件裏（靜態）。

（2）tab頁切換，能夠用上圖動態組件生成的例子；（scm系統和wms系統的tab頁看上去是路由錨點控制頁面切換，但實際也是披着動態組件的羊毛）

二者對比：

（1）展示方面：沒任何差異

（2）工做量：二者其實沒什麼差異，但同在一個父組件下基本都是傳相同的參數值，那麼你寧願一個個寫在模板上，仍是寫在方法裏一勞永逸？

（3）性能：ngIf——我第一時間就想到了ngIf帶來的註釋模板，頁面的變化都要進行變化檢測，模板有多個ngIf模板就會屢次判斷（強行解釋）；其次這種懶加載方式能減小bundle的體積，加快首屏渲染速度
    子問題1：enterComponents和聲明組件區別？ 答：declarations——經過模板的selector建立組件，即聲明並建立；entryComponents——聲明不建立，等到用的時候才經過離線模板編譯器（OTC）根據entryComponents List的內容編譯已聲明的組件建立工廠，Angular使用entryComponents來啓用「tree shaking」，即只編譯項目中實際使用的組件，而不是編譯全部在ngModule中聲明但從未使用的組件，enterComponents在ng裏有三種表現形式，

• 在@NgModule.bootstrap裏聲明的啓動組件，如AppComponent。
• 在路由配置裏引用的組件
• 其餘經過編程使用組件類型加載的動態組件 （angular2(4) 中動態建立模塊和組件的兩種方案）

 

擴展：

一句話分析這張圖片：ng的組件都是經過工廠函數（ComponentFactory<comp>）實例化出來，ngFactory.js文件負責裝載組件模板及變化檢測代碼片斷等靜態數據，變量早已經在編譯過程前開闢好內存空間，一切渲染過程都是以此爲媒介。剩下的就是coder的選擇是否用動態組件的方式加載，若是選用動態組件方式一定通過entryComponents的記錄，當頁面要加載這個組件時會OTC編譯聲明好的組件同時建立ngFactory.js 和 _Host_[x].ngFactory.js，前者渲染頁面（考慮IOS和Android）後者負責生成宿主元素，這個就是一個動態組件編譯過程。

 

其餘：動態組件考點不止這些，還有裝飾器@XXX、元數據的傳入能夠參考 Implementing custom component decorator ，

typescript的decorator是如何被編譯的

 

問題2：ng的依賴注入在軟件開發解決什麼？

答：依賴注入(Dependence Inject)是控制反轉(Inversion of Control 後)的行爲。

控制反轉——好萊塢的法則：「don‘t call us, we‘ll call you」。

緊耦合，誰也不能缺乏誰，對象或者模塊間經過互new的形式存在

實際場景，複雜且很差管理。

引入第三方把相應的對象/類（ng以服務形式存在）統一管理，並按需注入

最後，達到解耦的理想狀態

 

問題3：依賴注入不單單是調用服務，實戰還有更多新玩法。

概念篇——一、建立服務過程選擇@Injectable、@NgModule 仍是 @Component ？

二、provider入口API及各類提供商（useClass比較常見，適用於內部固定，外部變化多。useFactory對於權限控制即時變動狀態場景有用）

三、每一個組件建立一個注入器實例，服務實例在應用中是註冊屢次仍是僅有一次，是根據注入形式不一樣前者是@Component.provider後者是AppModule.provider （舉例：多種編輯會話，每一個組件須要一個特定的服務進行管理表單的新值和舊值，這種狀況必須使用@Component.provider，你能夠理解爲AppModule.provider註冊的就只有一個對象（單例），根模塊的提供商是向下傳遞到有須要用到該服務的組件中，而@Component.provider是爲每一個組件實例化獨立的服務）

實踐篇——一、組件能夠經過注入器，把本身注入到子組件上（服務=類）

二、類-接口寫法{provider: virtual, useClass: realClass}，爲了節省內存，同時做爲Token而存在

三、出現引用循環，當即想到[{ provide: Parent, useExisting: forwardRef(() => AlexComponent) }]

四、僅找上一級的注入器服務添加@Host() 在服務建立前寫 @Host() private heroCache: HeroCacheService，防止服務沒找到用@Optional()

 

疑問：angular既然選擇了AOT編譯，那麼離線模板編譯器（OTC）在客戶端是以什麼形式存在？代碼片斷？

 

動態組件模塊相關文章

angular2(4) 中動態建立模塊和組件的兩種方案

[譯] 關於 Angular 動態組件你須要知道的

Angular進階：Angular編譯機制（AOT、JIT）

Implementing custom component decorator 

30行代碼讓你理解angular依賴注入：angular 依賴注入原理

ioc-demo簡單例子