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中注入。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM