Angular 注入器層次結構

1. Platform Injector

2. Application Injector

調用bootstrapModule()時建立的就是Application Injector。

官方文檔：If you only specify providers at the top level (typically the root AppModule), the tree of injectors appears to be flat. All requests bubble up to the root NgModule injector that you configured with the bootstrapModule method.

3. LazyModule Injector

當要顯示lazy-loading的Component時，這個Component實例由LazyModule Injector來注入。

若是同一個服務在多個注入器（Application Injector和LazyModule Injector）被provide，容易致使bug：

在Module類上定義forRoot()靜態方法能夠避免在不一樣的注入器註冊同一個服務：

4. View Injector

在已經提到的3種Injector之下，還有View Injector。

在View中的element（尤爲是當這個element攜帶了Component時），有一個本身的Injector（也就是View Injector）。View Injector的層次結構與DOM的層次結構基本相同。View Injector層次結構的最頂端就是加載Entry Component（組件樹的根節點）的那個Module的Injector（Application Injector或LazyModule Injector）。

在上圖中，Application Module有一個Injector，AppComponent有一個Injector，<form>有一個Injector（這個Injector提供了NgForm Directive），<input>有一個Ijector（這個Injector提供了NgModel Directive）。
得益於這種層級關係，NgModel能夠經過DI拿到NgForm的實例，實現組件間交流。

<parent-component>
    <content-child-component></content-child-component>
</parent-component>

即便父組件將Content Child投影(project)到<ng-content>中，Content Child也能夠經過DI拿到父組件的實例，實現父組件與Content Child之間的交流。

完整視頻

https://youtu.be/EoSn8qASqQA