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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 197,814评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,124评论 2 375
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 144,814评论 0 327
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,924评论 1 268
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,815评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,562评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,944评论 3 388
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,582评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,859评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,881评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,700评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,493评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,943评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,115评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,413评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,978评论 2 343
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,182评论 2 339

推荐阅读更多精彩内容

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