Angular2 NgModule 模塊詳解

更新時(shí)間：2016年10月19日 08:57:41 投稿：lqh

這篇文章主要介紹了Angular2 NgModule 模塊詳解的相關(guān)資料,并附簡(jiǎn)單實(shí)例，需要的朋友可以參考下

Angular的模塊的目的是用來(lái)組織app的邏輯結(jié)構(gòu)。

在ng中使用@NgModule修飾的class就被認(rèn)為是一個(gè)ng module。NgModule可以管理模塊內(nèi)部的Components、Directives、Pipes，引入Service，并控制外部組件對(duì)內(nèi)部成員的訪問(wèn)權(quán)限。

angular2 具有了模塊的概念，響應(yīng)了后臺(tái)程序的號(hào)召，高內(nèi)聚低耦合。模塊就是用來(lái)進(jìn)行封裝，進(jìn)行高內(nèi)聚低耦合的功能。

其實(shí)各人認(rèn)為ng2 的模塊和.net的工程類(lèi)似，如果要使用模塊中定義的功能，第一步就是必須要引用它，ng2 中叫import 導(dǎo)入。

那么我們看模塊是否有層級(jí)概念呢，至少目前來(lái)看，模塊都是平級(jí)的，沒(méi)有主子之分。

如何定義模塊呢？

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

/* App Root */
import { AppComponent } from './app.component';

/* Feature Modules */
import { ContactModule } from './contact/contact.module';
import { CoreModule } from './core/core.module';
import { routing } from './app.routing';
import { Title } from '@angular/platform-browser';
@NgModule({
 imports: [
  BrowserModule,
  ContactModule,
  /*
    CoreModule,
  */
  CoreModule.forRoot({ userName: 'Miss Marple' }),
  routing
 ],
 declarations: [AppComponent],//聲明當(dāng)前模塊需要的指定 組件信息
 exports:[],
 providers: [Title],
 bootstrap: [AppComponent]
})
export class AppModule { }

簡(jiǎn)單說(shuō)明一下模塊元數(shù)據(jù)中各個(gè)參數(shù)的用途。

imports：導(dǎo)入其他模塊，就是要使用其他模塊的功能，必須要導(dǎo)入。

declarations：聲明，聲明本模塊包含的內(nèi)容。可能有些同學(xué)會(huì)遇到，定義了一個(gè)指令，在component中使用卻總是沒(méi)有生效的問(wèn)題，首先我們要檢查的就是是否進(jìn)行了聲明。

exports：外部可見(jiàn)的內(nèi)容。相當(dāng)于.net中聲明為public的那些類(lèi)。

providers：服務(wù)提供者，主要用來(lái)定義服務(wù)。估計(jì)ng2框架會(huì)自動(dòng)將注冊(cè)的服務(wù)體檢到依賴(lài)注入實(shí)例中，目前測(cè)試也是如此。

bootstrap：啟動(dòng)模塊。只在根模塊使用。在除了根模塊以外的其他模塊不能使用。

2.問(wèn)題2

目前官方叫法：?jiǎn)?dòng)模塊為根模塊，自定義的其他模塊叫特性模塊。

我們是否可以在特性模塊中import根模塊呢？

實(shí)驗(yàn)是檢驗(yàn)真理的最好方法。

import { NgModule }      from '@angular/core';
import { SharedModule }    from '../shared/shared.module';

import { ContactComponent }  from './contact.component';
import { ContactService }   from './contact.service';
import { routing }      from './contact.routing';
import{GuozhiqiModule}from '../directives/guozhiqi.module';
import{AppModule}from '../app.module';
@NgModule({
 imports:   [ SharedModule, routing,GuozhiqiModule,AppModule ],// 導(dǎo)入模塊
 declarations: [ ContactComponent ],//聲明 指令 
 providers:  [ ContactService ]//服務(wù)提供者 在當(dāng)前模塊提供者中注冊(cè)當(dāng)前模塊需要的服務(wù)
})
export class ContactModule { }

appModule是根模塊，我們定義的contactModule是特性模塊，現(xiàn)在我們通過(guò)imports 導(dǎo)入根模塊。

執(zhí)行出現(xiàn)錯(cuò)誤，contactModule導(dǎo)入了一個(gè)undefined的module？

為什么會(huì)出現(xiàn)這個(gè)問(wèn)題呢？

各人估計(jì)是因?yàn)?.導(dǎo)致了循環(huán)引用的問(wèn)題。appModule會(huì)加載ContactModule，而在ContactModule中又要import 根模塊，導(dǎo)致循環(huán)引用，從而出現(xiàn)錯(cuò)誤。

2.另一種解釋就是根模塊不允許導(dǎo)入。ng2框架不允許這樣

問(wèn)題3：如何避免出現(xiàn)循環(huán)引用呢？

官方給出了答案：https://angular.cn/docs/ts/latest/guide/ngmodule.html#!#prevent-reimport

constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
  if (parentModule) {
   throw new Error(
    'CoreModule is already loaded. Import it in the AppModule only');
  }
 }

但是我本地驗(yàn)證并不會(huì)有效的驗(yàn)證如何避免重復(fù)import一個(gè)模塊。

問(wèn)題4. 模塊與路由的關(guān)系。