Angular2 NgModule 模塊詳解

2019-11-20 08:42:51

字體：大中小

供稿：網(wǎng)友

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

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

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

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

那么我們看模塊是否有層級概念呢，至少目前來看，模塊都是平級的，沒有主子之分。

如何定義模塊呢？

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 { }

簡單說明一下模塊元數(shù)據(jù)中各個參數(shù)的用途。

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

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

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

providers：服務(wù)提供者，主要用來定義服務(wù)。估計ng2框架會自動將注冊的服務(wù)體檢到依賴注入實例中，目前測試也是如此。

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

2.問題2

目前官方叫法：啟動模塊為根模塊，自定義的其他模塊叫特性模塊。

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

實驗是檢驗真理的最好方法。

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)前模塊提供者中注冊當(dāng)前模塊需要的服務(wù)})export class ContactModule { }

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

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

為什么會出現(xiàn)這個問題呢？

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

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

問題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');  } }

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

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