本篇文章為大家展示了怎么在angular2中使用NgModel模塊，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括武川網(wǎng)站建設(shè)、武川網(wǎng)站制作、武川網(wǎng)頁(yè)制作以及武川網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，武川網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到武川省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

angular2 NgModel 模塊

在Angular2中一個(gè)Module指的是使用@NgModule修飾的class。@NgModule利用一個(gè)元數(shù)據(jù)對(duì)象來(lái)告訴Angular如何去編譯和運(yùn)行代碼。一個(gè)模塊內(nèi)部可以包含組件、指令、管道，并且可以將它們的訪問(wèn)權(quán)限聲明為公有，以使外部模塊的組件可以訪問(wèn)和使用到它們。我們也可以通過(guò)定義子模塊來(lái)擴(kuò)展我們應(yīng)用的功能。

NgModule 的API

interface NgModule {
   // providers: 這個(gè)選項(xiàng)是一個(gè)數(shù)組,需要我們列出我們這個(gè)模塊的一些需要共用的服務(wù)
   //      然后我們就可以在這個(gè)模塊的各個(gè)組件中通過(guò)依賴注入使用了.
  providers : Provider[]
   // declarations: 數(shù)組類型的選項(xiàng), 用來(lái)聲明屬于這個(gè)模塊的指令,管道等等.
   //        然后我們就可以在這個(gè)模塊中使用它們了.
  declarations : Array<Type<any>|any[]>
   // imports: 數(shù)組類型的選項(xiàng),我們的模塊需要依賴的一些其他的模塊,這樣做的目的使我們這個(gè)模塊
   //     可以直接使用別的模塊提供的一些指令,組件等等.
  imports : Array<Type<any>|ModuleWithProviders|any[]>
   // exports: 數(shù)組類型的選項(xiàng),我們這個(gè)模塊需要導(dǎo)出的一些組件,指令,模塊等;
   //     如果別的模塊導(dǎo)入了我們這個(gè)模塊,
   //     那么別的模塊就可以直接使用我們?cè)谶@里導(dǎo)出的組件,指令模塊等.
  exports : Array<Type<any>|any[]>
  // entryComponents: 數(shù)組類型的選項(xiàng),指定一系列的組件,這些組件將會(huì)在這個(gè)模塊定義的時(shí)候進(jìn)行編譯
  //         Angular會(huì)為每一個(gè)組件創(chuàng)建一個(gè)ComponentFactory然后把它存儲(chǔ)在ComponentFactoryResolver
  entryComponents : Array<Type<any>|any[]>
  // bootstrap: 數(shù)組類型選項(xiàng), 指定了這個(gè)模塊啟動(dòng)的時(shí)候應(yīng)該啟動(dòng)的組件.當(dāng)然這些組件會(huì)被自動(dòng)的加入到entryComponents中去
  bootstrap : Array<Type<any>|any[]>
  // schemas: 不屬于Angular的組件或者指令的元素或者屬性都需要在這里進(jìn)行聲明.
  schemas : Array<SchemaMetadata|any[]>
  // id: 字符串類型的選項(xiàng),模塊的隱藏ID,它可以是一個(gè)名字或者一個(gè)路徑;用來(lái)在getModuleFactory區(qū)別模塊,如果這個(gè)屬性是undefined
  //   那么這個(gè)模塊將不會(huì)被注冊(cè).
  id : string
 }

常用API簡(jiǎn)介

NgModule的主要屬性如下：

• declarations：模塊內(nèi)部Components/Directives/Pipes的列表，聲明一下這個(gè)模塊內(nèi)部成員，聲明之后才能使用對(duì)應(yīng)的組件等。

• providers：指定應(yīng)用程序的根級(jí)別需要使用的service。（Angular2中沒(méi)有模塊級(jí)別的service，所有在NgModule中聲明的Provider都是注冊(cè)在根級(jí)別的Dependency Injector中）

• imports：導(dǎo)入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的組件中被使用。比如導(dǎo)入CommonModule后就可以使用NgIf、NgFor等指令。

• exports：用來(lái)控制將哪些內(nèi)部成員暴露給外部使用。導(dǎo)入一個(gè)module并不意味著會(huì)自動(dòng)導(dǎo)入這個(gè)module內(nèi)部導(dǎo)入的module所暴露出的公共成員。除非導(dǎo)入的這個(gè)module把它內(nèi)部導(dǎo)入的module寫到exports中。

• bootstrap：通常是app啟動(dòng)的根組件，一般只有一個(gè)component。bootstrap中的組件會(huì)自動(dòng)被放入到entryComponents中。

• entryCompoenents: 不會(huì)再模板中被引用到的組件。這個(gè)屬性一般情況下只有ng自己使用，一般是bootstrap組件或者路由組件，ng會(huì)自動(dòng)把bootstrap、路由組件放入其中。 除非不通過(guò)路由動(dòng)態(tài)將component加入到dom中，否則不會(huì)用到這個(gè)屬性。

子模塊

隨著程序的壯大，單一的根模塊已不能清晰的劃分職責(zé)，這時(shí)候便可以引入Feature Module。Feature Module與根模塊的創(chuàng)建方式一樣，所有的模塊共享一個(gè)運(yùn)行期上下文和依賴注入器。

功能模塊與根模塊的職責(zé)區(qū)別主要有以下兩點(diǎn)：

• 根模塊的目的在于啟動(dòng)app，功能模塊的目的在于擴(kuò)展app

• 功能模塊可以根據(jù)需要暴露或隱藏具體的實(shí)現(xiàn)

Angular2提供的另一個(gè)與模塊有關(guān)的技術(shù)就是延遲加載了。默認(rèn)情況下Angular2將所有的代碼打包成一個(gè)文件，目的是為了提高應(yīng)用的流暢性，但是如果是運(yùn)行在mobile中的app，加載一個(gè)大文件可能會(huì)過(guò)慢，所以rc5提供了一種延遲加載方式。

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
 { path: '', redirectTo: 'contact', pathMatch: 'full'},
 { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, // 可以延遲加載子模塊，子模塊的結(jié)構(gòu)和父模塊一樣，它會(huì)去加載子模塊中的Routes配置，并跳轉(zhuǎn)對(duì)應(yīng)的組件中去。
 { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

其中，path指明路徑，loadChildren指明使用延遲加載，'app/crisis/crisis.module#CrisisModule'指明了模塊的路徑，和模塊的名稱。

上述內(nèi)容就是怎么在angular2中使用NgModel模塊，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前標(biāo)題：怎么在angular2中使用NgModel模塊
分享鏈接：http://aaarwkj.com/article44/jesdhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、全網(wǎng)營(yíng)銷推廣、虛擬主機(jī)、營(yíng)銷型網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)