本文作为学习的感悟记录,阅读本文之前需要熟读相关的官方文档。
- declearable(components, directives, pipes)的作用域由NgModule来控制,而service的作用域由分层依赖注入机制来控制。
- 每一个component实例都有一个注入器,因此一个component tree对应了一个与之平行的injector tree。相关文档
组件的注入器可能是一个injector tree中更高级的祖先注入器的代理(如果某个component本身没有
providers
),但这只是提升效率的实现细节,我们不用在乎这点差异,在你的脑海里只要想象成每个组件都有自己的注入器就可以了。
- root module和其他eagerly loaded module的providers都注册在application root injector,因此在其中一个NgModule中注册的service是全局共享的(相关文档)。(而在lazy loaded module中注册的service则仅仅局限于这个模块,后面会谈到)
可以大致理解为最顶层是platform的注入器,然后下一层是application root injector,然后下面才是组件注入器树。(在Platform Injector中注册的是Angular内部使用的一些服务,开发者一般不需要与它打交道)(一个页面最多有1个Platform,一个Platform中可以有多个Application,但是绝大多数时候我们只需要创建一个Application)
每一个lazy loaded module有一个自己的注入器,这个注入器继承上一个level的module注入器。最高level是eagerly loaded module,下一level是在eagerly loaded modules的路由定义中loadChildren指定的那些lazy modules,再下一level就是上一层lazy modules的路由定义中loadChildren指定的那些lazy modules,依此类推。
每一层的module injector下面就是一颗(与component tree相同结构、一一对应的)injector tree。
我们可以将provider注册在module injector中,也可以注册在injector tree的某一个节点上。 相关文档
- NgModule的providers注册的顺序:先注册imported modules中的providers(按照imports数组中的顺序),再注册NgModule.providers数组中的provider,如果注册了重复的provider token,后注册的覆盖先注册的。相关文档
- @Injectable的作用是在编译时让TypeScript编译器将constructor中的依赖信息保存在class metadata中,运行时注入器通过metadata中的信息来决定注入什么。如果service1需要在constructor中注入service2但service1却没有任何装饰器,那么TypeScript编译器就不会保存service1的依赖信息,那么在运行时创建service1的时候就会报错(注入器不知道要注入什么)。相关文档
- 除了可以用
被注入的class本身
或InjectionToken作为Provider token以外,使用class-interface也能获得诸多好处(为编辑器提供editor tooling,narrowing interface有助于解耦,占用资源少,可以用来注入父组件)。 - 如果attribute directive被应用在component element上时(
<my-component my-directive1 my-directive2></my-component>
)这些指令与组件共用同一个注入器。因此我们可以用attribute directive的providers array
来"扩展"compoent的providers array
。这篇文章将attribute directive与component之间的协作写得很清楚了。
还有很多细节没有搞清楚,比如:
- @Host究竟能查找到哪一个注入器(其表现与官方文档说明的不太一样,经过实验发现它能找到parent element上注册的providers、parent component上的viewProviders,却找不到parent component上的providers,存在transclusion的时候又复杂一些)
- 为什么在同一个element上的component、directive能共用同一个注入器
- 注入PlatformRef,ApplicationRef,NgModuleRef,Injector得到的对象中都有与injector相关的属性,这些injector有什么联系。
- 如果有一个directive挂载在一个普通element上,并且这个directive有providers数组,那么是否会在这个element上创建一个新的injector。
- 对于一个component来说,它的host element和host component分别是什么。
这些问题目前还没有在网上找到答案,可能需要研究源码才能解答了。
参考资料
https://stackoverflow.com/questions/36455305/accessing-root-angular-2-injector-instance-globally
https://blog.thoughtram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html
https://angular-2-training-book.rangle.io/handout/di/angular2/the_injector_tree.html (此页面尾部有一个很好用的在线例子)
https://medium.com/@ttemplier/component-composition-in-angular2-part-1-33f50f402906
https://stackoverflow.com/questions/44530654/angular-service-injecting-dynamic-component
https://stackoverflow.com/questions/45345163/angular-compiler-options