【angular】NgModule学习

NgModule参考手册

选项说明
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、 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(组件)级注入器

injectable&provider

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

app.module

关于provider的详细介绍也请参看原文，本人还未深入学习，后期有机会深入使用的话，再认真看看。暂时先会简单的使用！！！

@NgModule了解一点喽，后面再看看其他装饰器： Angular装饰器介绍