W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
特性模塊是用來對(duì)代碼進(jìn)行組織的模塊。
隨著應(yīng)用的增長(zhǎng),你可能需要組織與特定應(yīng)用有關(guān)的代碼。 這將幫你把特性劃出清晰的邊界。使用特性模塊,你可以把與特定的功能或特性有關(guān)的代碼從其它代碼中分離出來。 為應(yīng)用勾勒出清晰的邊界,有助于開發(fā)人員之間、小組之間的協(xié)作,有助于分離各個(gè)指令,并幫助管理根模塊的大小。
與核心的 Angular API 的概念相反,特性模塊是最佳的組織方式。特性模塊提供了聚焦于特定應(yīng)用需求的一組功能,比如用戶工作流、路由或表單。 雖然你也可以用根模塊做完所有事情,不過特性模塊可以幫助你把應(yīng)用劃分成一些聚焦的功能區(qū)。特性模塊通過它提供的服務(wù)以及共享出的組件、指令和管道來與根模塊和其它模塊合作。
如果你已經(jīng)有了 Angular CLI 生成的應(yīng)用,可以在項(xiàng)目的根目錄下輸入下面的命令來創(chuàng)建特性模塊。把這里的 CustomerDashboard
替換成你的模塊名。你可以從名字中省略掉“Module”后綴,因?yàn)?CLI 會(huì)自動(dòng)追加上它:
ng generate module CustomerDashboard
這會(huì)讓 CLI 創(chuàng)建一個(gè)名叫 "customer-dashboard" 的文件夾,其中有一個(gè)名叫 "customer-dashboard.module.ts",內(nèi)容如下:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class CustomerDashboardModule { }
無論根模塊還是特性模塊,其 NgModule 結(jié)構(gòu)都是一樣的。在 CLI 生成的特性模塊中,在文件頂部有兩個(gè) JavaScript 的導(dǎo)入語(yǔ)句:第一個(gè)導(dǎo)入了 NgModule
,它像根模塊中一樣讓你能使用 @NgModule
裝飾器;第二個(gè)導(dǎo)入了 CommonModule
,它提供了很多像 ngIf
和 ngFor
這樣的常用指令。 特性模塊導(dǎo)入 CommonModule
,而不是 BrowserModule
,后者只應(yīng)該在根模塊中導(dǎo)入一次。 CommonModule
只包含常用指令的信息,比如 ngIf
和 ngFor
,它們?cè)诖蠖鄶?shù)模板中都要用到,而 BrowserModule
為瀏覽器所做的應(yīng)用配置只會(huì)使用一次。
declarations
數(shù)組讓你能添加專屬于這個(gè)模塊的可聲明對(duì)象(組件、指令和管道)。 要添加組件,就在命令行中輸入如下命令,這里的 "customer-dashboard" 是一個(gè)目錄,CLI 會(huì)把特性模塊生成在這里,而 CustomerDashboard
就是該組件的名字:
ng generate component customer-dashboard/CustomerDashboard
這會(huì)在 customer-dashboard 中為新組件生成一個(gè)目錄,并使用 CustomerDashboardComponent 的信息修改這個(gè)特性模塊:
Path:"src/app/customer-dashboard/customer-dashboard.module.ts"。
// import the new component
import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';
@NgModule({
imports: [
CommonModule
],
declarations: [
CustomerDashboardComponent
],
})
CustomerDashboardComponent 出現(xiàn)在了頂部的 JavaScript 導(dǎo)入列表里,并且被添加到了 declarations
數(shù)組中,它會(huì)讓 Angular 把新組件和這個(gè)特性模塊聯(lián)系起來。
要想把這個(gè)特性模塊包含進(jìn)應(yīng)用中,你還得讓根模塊 "app.module.ts" 知道它。注意,在 "customer-dashboard.module.ts" 文件底部 CustomerDashboardModule
的導(dǎo)出部分。這樣就把它暴露出來,以便其它模塊可以拿到它。要想把它導(dǎo)入到 AppModule
中,就把它加入 "app.module.ts" 的導(dǎo)入表中,并將其加入 imports
數(shù)組:
Path:"src/app/app.module.ts"。
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// import the feature module here so you can add it to the imports array below
import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
CustomerDashboardModule // add the feature module here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
現(xiàn)在 AppModule
知道這個(gè)特性模塊了。如果你往該特性模塊中加入過任何服務(wù)提供者,AppModule
也同樣會(huì)知道它,其它模塊中也一樣。不過,NgModule
并不會(huì)暴露出它們的組件。
當(dāng) CLI 為這個(gè)特性模塊生成 CustomerDashboardComponent
時(shí),還包含一個(gè)模板 "customer-dashboard.component.html",它帶有如下頁(yè)面腳本:
Path:"src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html"。
<p>
customer-dashboard works!
</p>
要想在 AppComponent
中查看這些 HTML,你首先要在 CustomerDashboardModule
中導(dǎo)出 CustomerDashboardComponent
。 在 "customer-dashboard.module.ts" 中,declarations
數(shù)組的緊下方,加入一個(gè)包含 CustomerDashboardModule
的 exports
數(shù)組:
Path:"src/app/customer-dashboard/customer-dashboard.module.ts"。
exports: [
CustomerDashboardComponent
]
然后,在 AppComponent
的 "app.component.html" 中,加入標(biāo)簽 <app-customer-dashboard>
:
Path:"src/app/app.component.html"。
<h1>
{{title}}
</h1>
<!-- add the selector from the CustomerDashboardComponent -->
<app-customer-dashboard></app-customer-dashboard>
現(xiàn)在,除了默認(rèn)渲染出的標(biāo)題外,還渲染出了 CustomerDashboardComponent
的模板:
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: