Angular 注入器层次结构

csRyan

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()静态方法可以避免在不同的注入器注册同一个服务:
clipboard.png

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

阅读 1.4k

csRyan的学习专栏
分享对于计算机科学的学习和思考,只发布有价值的文章: 对于那些网上已经有完整资料,且相关资料已经整...

So you're passionate? How passionate? What actions does your passion lead you to do? If the heart...

1.1k 声望
170 粉丝
0 条评论

So you're passionate? How passionate? What actions does your passion lead you to do? If the heart...

1.1k 声望
170 粉丝
文章目录
宣传栏