同 Angular service 的单例特性不同,Angular 组件和指令通常会被多次实例化,比如 HTML markup 中每出现一次 Component 的 selector,就会触发 Component 的一次实例化。

这些 Component 和 Directive 的范围,仅限于导入它们的 NgModule,以防止命名冲突,例如两个组件可能具有相同的选择器。正是由于 Angular 依赖注入 (DI) 行为的这种差异,需要将包含组件和指令的 NgModule 与包含组件、指令和 Providers 的 ModuleWithProviders 区分开来,这就是 forRoot() 方法的用武之地。

然而,依赖注入并不总是这么简单。 有时在引导过程中,所有应用程序的 NgModule 都不可用。延迟加载就是这样一个例子。当在路由期间延迟加载 NgModule 时,在延迟加载的 NgModule 中注册的 providers,提供程序及其子项在引导过程中不可用,此时 Angular 无法注册它们。 因此,它们仅在加载路由时才作为 providers 添加,而且它们的作用域是从延迟加载的 NgModule 及其子模块开始注入。

如果有多个延迟加载的 NgModule 尝试注册相同的提供程序,则 NgModule 树的每个节点都会以不同的实例结束。 通过在根目录导入提供程序,它有助于确保所有延迟加载的 NgModule 都获得相同的提供程序实例,这也是为什么 forRoot() 被这样命名的原因。

作为消费者,当应用层序里使用到的某个库依赖项需要一个延迟加载的 NgModule 时,就需要调用其 forRoot 方法。在应用程序的根目录导入模块并使用 forRoot() 方法注册,以全局导入提供程序。在其他 NgModules 中,当需要导入组件和指令时,使用适当的非根形式的导入。

从 Angular Component 和 Directive 的实例化,谈谈 Angular forRoot 方法的命令由来相关推荐

  1. Angular Component 的 renderer 创建机制以及 Angular 版本号的确定方式

    我的 Angular 应用里,有一个 selector 为 app-root 的 Component: 运行时,基于这个 selector 创建 Component reference: 进而创建 r ...

  2. Angular自定义structural指令的实例化过程以及set方法的调用

    我有一个自定义指令*appUnless, 在第48行使用,这个<p>前面是第39行的<p>,后面是第52行的<p>: 观察运行时构造函数传入的elementRef: ...

  3. 深入解析Angular Component的源码示例

    本篇文章主要介绍了剖析Angular Component的源码示例,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Web Component 定 ...

  4. Angular 下的 directive (part 2)

    ngCloak ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候.使用它可以避免闪烁问题的出现.   该指令可以应用于<body>元素,但首选使用多个ng ...

  5. Angular Component代码和编译后生成的JavaScript代码

    从 TypeScript 转换为 JavaScript 在这里称为编译. 在这种情况下,compiling 并不意味着创建二进制代码. 对于这种翻译,使用术语 transpilation 而不是 co ...

  6. Angular Component的DOM级别的单元测试方法

    HTMLElement <span [textContent] = "AText"></span> export class AComponent {ATe ...

  7. Angular component的一个例子

    官网:https://angular.io/guide/architecture-components Before a view is displayed, Angular evaluates th ...

  8. 使用 Rxjs 解决 Angular Component 之间的通信问题

    本文讨论如果两个 Angular Component 彼此不知道对方的存在,并且也没有共享的父子 Component 时,如何进行通信. 在包括 Angular 在内的许多前端框架中,当我们将应用程序 ...

  9. SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试

    Jerry 之前的文章SAP 产品 UI 里的容器组件的概念和开发概述介绍过,SAP Spartacus Angular Component,通过我们开发团队自定义的指令 cxComponentWra ...

最新文章

  1. 在IT的世界里,分享是一种快乐.
  2. PC微信逆向:分析@群成员call
  3. Spring-aop注解开发(切点表达式的抽取)
  4. 解决 MyEclipse build workspace 慢,validation javascript 更慢的问题
  5. 分布式事务slides
  6. django中URL常用配置方法
  7. 更改Fedora 11的plymouth开机动画
  8. paip.sql2k,sql2005,sql2008,sql2008 r2,SQL2012以及EXPRESS版本的区别
  9. c语言游戏小型程序代码,C语言小游戏源码
  10. 车载电子电器防水防尘等级介绍
  11. 图灵机器人Web API
  12. 微信小程序服务商接入流程
  13. com.mysql.jdbc.MysqlDataTruncation 报错
  14. Vue3.x的安装和初始化
  15. 浅谈sklearn中DBSCAN的欧式距离(Euclidean Distance)的计算
  16. python求解立方根_求解立方根
  17. 勾股定理竟然有500种证明方法,你会几种?
  18. 数学黑洞(二)任何数都逃不出的西西弗斯黑洞
  19. 网络打印服务器存打印文件,网络打印机文件打印顺序问题
  20. 计算机电子钢琴,电脑钢琴调律

热门文章

  1. js 跳转到指定位置 高德地图_JS引入高德地图定位
  2. html 苹果 地图,为什么苹果手机自带的地图是高德而不是谷歌?
  3. 全志A40i工业核心板,100%国产4核ARM Cortex-A7,支持“双屏异显”【显示接口能力,工业HMI首选方案】
  4. iOS 苹果内购 In-App Purchase 踩过的坑
  5. Redis 发布订阅功能
  6. 最佳联盟营销软件解决方案:简化你的联盟管理
  7. android监控app被杀死,Android App前后台监控
  8. OpenCV学习笔记--下载和安装
  9. 使用SHP数据批量裁剪TIF图像并转为JPG格式
  10. Hello ......