选项说明 |
---|
providers :在当前模块的注入器中可用的一组可注入对象。@Component 中也有该配置项,且更常见 ;@NgModule中的providers 不常见,一般用于根模块app.module |
declarations :属于该模块的一组组件、指令和管道(统称可声明对象)。 |
imports :这里列出的 NgModule 所导出的可声明对象可用在当前模块内的模板中。 |
exports :此 NgModule 中声明的一组组件、指令和管道可以在导入了本模块的模块下任何组件的模板中使用。 导出的这些可声明对象就是该模块的公共 API。 |
entryComponents : 定义此 NgModule 中要编译的组件集,这样它们才可以动态加载到视图中。 |
bootstrap : 应用的主视图,一般就是指根组件。它是应用中所有其它视图的宿主。即只有根模块app.module 才应该设置这个 bootstrap: [AppComponent] 属性。所以不要纠结什么时候应该用bootstrap ,除了根组件,其他组件一般不用吧。 |
schemas :模块中含 不属于Angular 的组件或者指令的元素或者属性则启用该配置项,允许设置的值有①NO_ERRORS_SCHEMA: 当前模板中存在未知选择器时它不会显示错误 ②CUSTOM_ELEMENTS_SCHEMA: 当前模板中可以使用任何类型的自定义元素 |
id :当前 NgModule 在 getModuleFactory 中的名字或唯一标识符。 如果为 undefined ,则该模块不会被注册进 getModuleFactory 中。 |
jit : 如果为 true ,则该模块将会被 AOT 编译器忽略,因此始终会使用 JIT 编译。 |

A. 可声明对象 declarations
在模板中可用的选择器selector
包括那些直接声明在这里的可声明对象和导入的那些 NgModule
中所导出的可声明对象。
可声明对象必须属于也只能属于一个模块。 如果你尝试把同一个类声明在多个模块中,那么编译器就会报错。 要注意不能声明那些从其它模块中导入的类。
B. 入口组件 entryComponents
Angular
使用entryComponents
来启用树震动
,即只编译
项目中实际使用
的组件,而不是编译所有在ngModule
中声明但从未使用的组件
这是用ViewContainerRef.createComponent( )
添加的动态添加的组件。将它们添加到entryComponents
告诉脱机模板编译器编译它们并为它们创建工厂。
Angular
会自动将以下类型的组件添加到模块的entryComponents
中:
① @ NgModule.bootstrap
列表中的组件,如动态加载AppComponent
。
② 路由器配置中引用的组件,因为router-outlet
也使用ViewContainerRef.createComponent( )
将路由组件添加到DOM
。。
离线模板编译器OTC
只生成实际使用的组件。如果组件不直接用于模板,OTC
不知道是否需要编译。有了entryComponents
,你可以告诉OTC
也编译这些组件,以便在运行时可用。 如一个列表页中点击新增按钮时,弹出的表单组件,它不在路由中,需要显示写在entryComponents
中。
D. 路由配置中的imports
&exports

导出具有传递性。ModuleA
可以导入 ModuleB
并将其导出,这会让所有 ModuleB
中的导出同样可用在导入了 ModuleA
的那些模块中。
angular
中的NgModule
是否类似java
中的package
呢?

通过导出的传递性,将第三方组件模块引入到具体的页面模块

E. 注入器Injector
& 提供商Provider
参考文章: Angular的依赖注入 本节简单地介绍下服务的注入与使用,很多细节部分参看原文
Angular
系统中通过在类上添加@Injectable
装饰器来告诉系统这个类(服务)是可注入的。当然了这仅仅只是告诉Angular
系统这个类(服务)类是可注入的。但是这个服务可以在哪里使用,由谁提供,就得靠注入器和提供商来一起确定了。
@Injectable
注入方式有哪些?
(一)providedIn
方式:对应三个值:Type<any>
、 root
、 null
- ①
null
:若想使用需要在NgModule
装饰器或者Component
装饰器里面的元数据providers
中指定。 - ②
root
:代表顶级AppModule
。表明当前服务可以在整个Angular
应用里面使用。且在整个Angular应用
中只有一个
服务实例。 - ③
NgModule
:通过providedIn
指定一个NgModule
。让当前服务只能在该指定NgModule
里使用。这种方式有个特别要特别注意的地方:如下的写法是不对的。
import { Injectable } from '@angular/core';
import {NgmoduleProvidersModule} from './ngmodule-providers.module';
@Injectable({
providedIn: NgmoduleProvidersModule
})
export class NgmoduleProviderInModuleService {
constructor() { }
}
编译的时候会抛出一个警告信息,编译不过。具体怎么写,也请看原文吧。
(二)Component
(组件)级注入器

本人自己看的angular工程案例
中,使用第二种方式
的居多(即装饰器@Component
中的providers
比较常见;@NgModule中
的providers
就在app.module
中见过);

关于provider的详细介绍
也请参看原文,本人还未深入学习,后期有机会深入使用的话,再认真看看。暂时先会简单的使用!!!
@NgModule
了解一点喽,后面再看看其他装饰器: Angular装饰器介绍