• Angular2 NgModule


    1. 说明

    典型的模块是一个内聚的代码块,用来实现某种单一的功能。Angular2应用程序本质上是有一系列模块组成的,而且Angular 本身就是一组模块库。模块主要是导出一些东西——类,函数,值,供其它模块导入,然后使用这个类,函数或者值。Angular2 应用是模块化的,并且 Angular2 有自己的模块系统,它被称为 Angular2 模块 或 NgModules。

    NgModules是带有 @NgModule 装饰器函数的 类 。 @NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。它标记出该模块拥有的组件,指令和管道,引入的其他Angular2模块,以及导出给其他模块使用的公共部分,同时还可以向当前模块注入对应的服务提供商等。

    模块是组织应用程序和使用外部程序库的最佳途径。很多 Angular 库都是模块,比如: FormsModuleHttpModuleRouterModule 。模块可能在应用启动时主动加载,也可能由路由器进行异步 惰性加载。

    每个Angular2应用都必须存在唯一一个根模块,我们将通过引导根模块来启动应用。

    2. 实例

    Angular2模块一般由注解,元数据以及模块类组成,来看下面的这个简单的组件的例子:

    import { NgModule } from '@angular/core';

    import { FormsModule, ReactiveFormsModule } from '@angular/forms';

    import { PortalComponent } from './portal';

    import { routing } from './routes';

    @NgModule({

    imports: [

    routing,

    FormsModule,

    ReactiveFormsModule

    ],

    exports: [],

    declarations: [PortalComponent],

    providers: []

    })

    export class PortalModule {

    }

    以上的例子可以看出,我们通过元数据imports导入了FormsModule等其他Angular2模块,通过declarations声明当前模块中使用的组件等,当然,我们还可以通过exports导出公共部分提供其他模块使用,以及providers提供了当前模块所使用的服务提供商。

    3. 定义

    通过官方提供的NgModule的API我们可以知道,其元数据的描述如下。

    interface NgModule {

    providers : Provider[]

    declarations : Array<Type<any>|any[]>

    imports : Array<Type<any>|ModuleWithProviders|any[]>

    exports : Array<Type<any>|any[]>

    entryComponents : Array<Type<any>|any[]>

    bootstrap : Array<Type<any>|any[]>

    schemas : Array<SchemaMetadata|any[]>

    id : string

    }

    我们分别对这些属性加以说明:

    l providers : Provider[]

    注入在该模块中使用的服务提供商,在根模块注入的服务供应商可以供整个应用程序使用。

    l declarations : Array<Type<any>|any[]>

    声明在该模块中使用的组件,指令以及通道

    l imports : Array<Type<any>|ModuleWithProviders|any[]>

    导入在该模块中使用的其他Angular2模块中的组件,指令以及管道等,该模块中的组件等由exports属性导出。

    l exports : Array<Type<any>|any[]>

    导出该模块中的组件,指令以及管道等,以便提供给其他Angular2模块使用。

    l entryComponents : Array<Type<any>|any[]>

    声明在模块定义时进行编译的组件,当模块加载的时候回生成ComponentFactory并保存在ComponentFactoryResolver,使用ComponentFactoryResolver创建组件的时候应该现在此处进行声明。

    l bootstrap : Array<Type<any>|any[]>

    此处声明当模块启动加载的时候同时执行启动加载的组件,这些组件会自动添加到entryComponents中。

    l schemas : Array<SchemaMetadata|any[]>

    声明在Angular中使用的非组件,指令或管道等Angular标准元素或者属性的其他自定义元素或属性信息。常用的schemas形式有:

    NO_ERRORS_SCHEMA: 所有的元素或者属性均可以

    CUSTOM_ELEMENTS_SCHEMA:任意元素(元素标签中包含“-”)和属性都可以

    l id : string

    一个独立的模块ID,用来在getModuleFactory标识对应的模块,如果设定对应的ID信息,这不会在getModuleFactory中注入。

  • 相关阅读:
    java 基础笔记
    专业人士给我的JAVA学习建议
    JAVA版2048
    学习构建之法后的疑问
    角色职责及技术需求相关思考
    使用Composer安装Yii2框架+Windows下的XAMPP部署Yii2
    MiniProgram开发--云开发(1)
    Android Studio丢失Logcat问题
    SSH异常处理记录
    Android环境搭建与通过命令行方式创建Android应用
  • 原文地址:https://www.cnblogs.com/SLchuck/p/6011208.html
Copyright © 2020-2023  润新知