成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

angular2 NgModel` 模塊

OnlyLing / 2757人閱讀

摘要：模塊在中一個指的是使用修飾的。中沒有模塊級別的，所有在中聲明的都是注冊在根級別的中導(dǎo)入其他，其它暴露的出的等可以在本的組件中被使用。導(dǎo)入一個并不意味著會自動導(dǎo)入這個內(nèi)部導(dǎo)入的所暴露出的公共成員。

angular2 NgModel 模塊 
在Angular2中一個Module指的是使用@NgModule修飾的class。@NgModule利用一個元數(shù)據(jù)對象來告訴Angular如何去編譯和運行代碼。一個模塊內(nèi)部可以包含組件、指令、管道，并且可以將它們的訪問權(quán)限聲明為公有，以使外部模塊的組件可以訪問和使用到它們。我們也可以通過定義子模塊來擴展我們應(yīng)用的功能。
NgModule 的API 
interface NgModule {
     // providers: 這個選項是一個數(shù)組,需要我們列出我們這個模塊的一些需要共用的服務(wù)
     //            然后我們就可以在這個模塊的各個組件中通過依賴注入使用了.
    providers : Provider[]
     // declarations: 數(shù)組類型的選項, 用來聲明屬于這個模塊的指令,管道等等.
     //               然后我們就可以在這個模塊中使用它們了.
    declarations : Array|any[]>
     // imports: 數(shù)組類型的選項,我們的模塊需要依賴的一些其他的模塊,這樣做的目的使我們這個模塊
     //          可以直接使用別的模塊提供的一些指令,組件等等.
    imports : Array|ModuleWithProviders|any[]>
     // exports: 數(shù)組類型的選項,我們這個模塊需要導(dǎo)出的一些組件,指令,模塊等;
     //          如果別的模塊導(dǎo)入了我們這個模塊,
     //          那么別的模塊就可以直接使用我們在這里導(dǎo)出的組件,指令模塊等.
    exports : Array|any[]>
    // entryComponents: 數(shù)組類型的選項,指定一系列的組件,這些組件將會在這個模塊定義的時候進行編譯
    //                  Angular會為每一個組件創(chuàng)建一個ComponentFactory然后把它存儲在ComponentFactoryResolver
    entryComponents : Array|any[]>
    // bootstrap: 數(shù)組類型選項, 指定了這個模塊啟動的時候應(yīng)該啟動的組件.當(dāng)然這些組件會被自動的加入到entryComponents中去
    bootstrap : Array|any[]>
    // schemas: 不屬于Angular的組件或者指令的元素或者屬性都需要在這里進行聲明.
    schemas : Array
    // id: 字符串類型的選項,模塊的隱藏ID,它可以是一個名字或者一個路徑;用來在getModuleFactory區(qū)別模塊,如果這個屬性是undefined
    //     那么這個模塊將不會被注冊.
    id : string
 }
常用API簡介

NgModule的主要屬性如下：

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

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

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

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

bootstrap：通常是app啟動的根組件，一般只有一個component。bootstrap中的組件會自動被放入到entryComponents中。

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

子模塊

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

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

根模塊的目的在于啟動app，功能模塊的目的在于擴展app

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

Angular2提供的另一個與模塊有關(guān)的技術(shù)就是延遲加載了。默認情況下Angular2將所有的代碼打包成一個文件，目的是為了提高應(yīng)用的流暢性，但是如果是運行在mobile中的app，加載一個大文件可能會過慢，所以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)和父模塊一樣，它會去加載子模塊中的Routes配置，并跳轉(zhuǎn)對應(yīng)的組件中去。
  { path: "heroes", loadChildren: "app/hero/hero.module#HeroModule" }
];

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103404.html

相關(guān)文章

  • Angular2入門系列（四）————ngModel和表單元素name屬性

    摘要：入門系列四和表單元素屬性通過實現(xiàn)雙向綁定當(dāng)開發(fā)一個數(shù)據(jù)錄入表單的時候，我們常常希望既可以顯示數(shù)據(jù)的屬性值，當(dāng)用戶更改時，又可以更新數(shù)據(jù)的屬性值。以及怎么提取當(dāng)前輸入框中的文本值，以便去更新數(shù)據(jù)屬性。 Angular2入門系列（四）————ngModel和表單元素name屬性 通過NgModel實現(xiàn)雙向綁定當(dāng)開發(fā)一個數(shù)據(jù)錄入表單的時候，我們常常希望既可以顯示數(shù)據(jù)的屬性值，當(dāng)用戶更改時，又...

    imccl 評論0 收藏0

  • Angular2入門系列（四）————ngModel和表單元素name屬性

    摘要：入門系列四和表單元素屬性通過實現(xiàn)雙向綁定當(dāng)開發(fā)一個數(shù)據(jù)錄入表單的時候，我們常常希望既可以顯示數(shù)據(jù)的屬性值，當(dāng)用戶更改時，又可以更新數(shù)據(jù)的屬性值。以及怎么提取當(dāng)前輸入框中的文本值，以便去更新數(shù)據(jù)屬性。 Angular2入門系列（四）————ngModel和表單元素name屬性 通過NgModel實現(xiàn)雙向綁定當(dāng)開發(fā)一個數(shù)據(jù)錄入表單的時候，我們常常希望既可以顯示數(shù)據(jù)的屬性值，當(dāng)用戶更改時，又...

    tianhang 評論0 收藏0

  • Angular 2.x 從 0 到 1 (二）史上最簡單的 Angular2 教程

    摘要：下面我們看看如果使用是什么樣子的，首先我們需要在組件的修飾器中配置，然后在組件的構(gòu)造函數(shù)中使用參數(shù)進行依賴注入。 第一節(jié)：Angular 2.0 從0到1 （一）第二節(jié)：Angular 2.0 從0到1 （二）第三節(jié)：Angular 2.0 從0到1 （三） 第二節(jié)：用Form表單做一個登錄控件 對于login組件的小改造 在 hello-angularsrcapploginlogin...

    warkiz 評論0 收藏0

  • Angular 2 快速上手

    摘要：為了簡單起見，在本文中將會使用。已經(jīng)實例化了并且將它的模板載入到了元素中。中的依賴注入發(fā)生在該類的構(gòu)造函數(shù)中，因此我們將在構(gòu)造函數(shù)中注入。 國內(nèi) Angular2 資料比較少，這里看到一篇不錯的入門文章就分享過來了 —— Angular 2 快速上手，這里面還有很多有關(guān)于 Angular2 的文章，感興趣的朋友可以去看一看 目前angular2已經(jīng)來到了beta版，這意味著它已經(jīng)做好了...

    singerye 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<