Angular 依赖注入难点整理

本文作为学习的感悟记录,阅读本文之前需要熟读相关的官方文档。

  1. declearable(components, directives, pipes)的作用域由NgModule来控制,而service的作用域由分层依赖注入机制来控制。
  2. 每一个component实例都有一个注入器,因此一个component tree对应了一个与之平行的injector tree。相关文档

组件的注入器可能是一个injector tree中更高级的祖先注入器的代理(如果某个component本身没有providers),但这只是提升效率的实现细节,我们不用在乎这点差异,在你的脑海里只要想象成每个组件都有自己的注入器就可以了。

  1. 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的注入器树

    每一个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的某一个节点上。 相关文档

  1. NgModule的providers注册的顺序:先注册imported modules中的providers(按照imports数组中的顺序),再注册NgModule.providers数组中的provider,如果注册了重复的provider token,后注册的覆盖先注册的。相关文档
  2. @Injectable的作用是在编译时让TypeScript编译器将constructor中的依赖信息保存在class metadata中,运行时注入器通过metadata中的信息来决定注入什么。如果service1需要在constructor中注入service2但service1却没有任何装饰器,那么TypeScript编译器就不会保存service1的依赖信息,那么在运行时创建service1的时候就会报错(注入器不知道要注入什么)。相关文档
  3. 除了可以用被注入的class本身InjectionToken作为Provider token以外,使用class-interface也能获得诸多好处(为编辑器提供editor tooling,narrowing interface有助于解耦,占用资源少,可以用来注入父组件)。
  4. 如果attribute directive被应用在component element上时(<my-component my-directive1 my-directive2></my-component>)这些指令与组件共用同一个注入器。因此我们可以用attribute directive的providers array来"扩展"compoent的providers array这篇文章将attribute directive与component之间的协作写得很清楚了。

还有很多细节没有搞清楚,比如:

  1. @Host究竟能查找到哪一个注入器(其表现与官方文档说明的不太一样,经过实验发现它能找到parent element上注册的providers、parent component上的viewProviders,却找不到parent component上的providers,存在transclusion的时候又复杂一些)
  2. 为什么在同一个element上的component、directive能共用同一个注入器
  3. 注入PlatformRef,ApplicationRef,NgModuleRef,Injector得到的对象中都有与injector相关的属性,这些injector有什么联系。
  4. 如果有一个directive挂载在一个普通element上,并且这个directive有providers数组,那么是否会在这个element上创建一个新的injector。
  5. 对于一个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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Angular 2架构总览 - 简书http://www.jianshu.com/p/aeb11061b82c A...
    葡萄喃喃呓语阅读 1,547评论 2 13
  • 版本:Angular 5.0.0-alpha 依赖注入是重要的应用设计模式。它使用得非常广泛,以至于几乎每个人都称...
    soojade阅读 3,061评论 0 3
  • Angular 2是一个帮助我们使用HTML和JavaScript构建客户端应用的框架。这个框架包含几个互相协作的...
    JasonQiao阅读 7,263评论 1 48
  • 一、什么是依赖注入 控制反转(IoC) 控制反转的概念最早在2004年由Martin Fowler提出,是针对面向...
    Keriy阅读 3,556评论 0 8
  • 背景 公司使用Jenkins+Xcode integration插件构建自动打包工具,在升级XCode9之后自动打...
    User106阅读 5,375评论 2 6

友情链接更多精彩内容