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

简介: 从 Angular Component 和 Directive 的实例化,谈谈 Angular forRoot 方法的命令由来

同 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() 被这样命名的原因。

e16a893e45684545933804660db0eea0.png

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

854cfc23251f77992e4b848107f55fc2.png

de8a297c10849184323089526d0b3d52.png

1822dfc707cb4d8bb0dc5f6fa907a93a.png

目录
相关文章
|
4月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
6月前
|
设计模式 JavaScript 前端开发
Angular 懒加载模块与 Combined Injector
Angular 懒加载模块与 Combined Injector
33 0
|
7月前
从 Angular Component 和 Directive 的实例化,谈谈 Angular forRoot 方法的命令由来
同 Angular service 的单例特性不同,Angular 组件和指令通常会被多次实例化,比如 HTML markup 中每出现一次 Component 的 selector,就会触发 Component 的一次实例化。
41 0
|
6月前
|
存储 API 网络架构
Angular 14 新的 inject 函数介绍
Angular 14 提供了一些非常有趣的特性:类型化表单(typed forms)、独立组件(standalone components),以及本文将要介绍的内容,即在所谓的构造器阶段(constructor phase) 使用 inject 函数的能力。
50 0
|
7月前
|
存储
Angular forRoot 方法的使用场合介绍
Angular forRoot 方法的使用场合介绍
84 1
|
7月前
关于 Angular 应用 Components 和 Directives 的实例化问题
关于 Angular 应用 Components 和 Directives 的实例化问题
26 0
|
7月前
|
JavaScript
Angular @Inject 注解的实际应用例子和工作原理浅析
Angular @Inject 注解的实际应用例子和工作原理浅析
39 0
|
7月前
关于 Angular 应用 Module 的 forRoot 方法的讨论
关于 Angular 应用 Module 的 forRoot 方法的讨论
39 0
|
7月前
|
网络架构
关于在 Angular 应用里重复调用 RouterModule.forRoot(ROUTES) 的讨论
关于在 Angular 应用里重复调用 RouterModule.forRoot(ROUTES) 的讨论
26 0
|
存储 API
使用 Angular 14 的 inject 函数优化对 Ngrx 的使用方式
使用 Angular 14 的 inject 函数优化对 Ngrx 的使用方式