99re热这里只有精品视频,7777色鬼xxxx欧美色妇,国产成人精品一区二三区在线观看,内射爽无广熟女亚洲,精品人妻av一区二区三区

Angular9 入口組件

2020-07-03 14:05 更新

從分類上說,入口組件是 Angular 命令式加載的任意組件(也就是說你沒有在模板中引用過它), 你可以在 NgModule 中引導它,或把它包含在路由定義中來指定入口組件。

對比一下這兩種組件類型:有一類組件被包含在模板中,它們是聲明式加載的;另一類組件你會命令式加載它,這就是入口組件。

入口組件有兩種主要的類型:

  • 引導用的根組件。

  • 在路由定義中指定的組件。

引導用的入口組件

下面這個例子中指定了一個引導用組件 AppComponent,位于基本的 "app.module.ts" 中:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent] // bootstrapped entry component
})

可引導組件是一個入口組件,Angular 會在引導過程中把它加載到 DOM 中。 其它入口組件是在其它時機動態(tài)加載的,比如用路由器。

Angular 會動態(tài)加載根組件 AppComponent,是因為它的類型作為參數(shù)傳給了 @NgModule.bootstrap 函數(shù)。

組件也可以在該模塊的 ngDoBootstrap() 方法中進行命令式引導。 @NgModule.bootstrap 屬性告訴編譯器,這里是一個入口組件,它應該生成代碼,來使用這個組件引導該應用。

引導用的組件必須是入口組件,因為引導過程是命令式的,所以它需要一個入口組件。

路由到的入口組件

入口組件的第二種類型出現(xiàn)在路由定義中,就像這樣:

const routes: Routes = [
  {
    path: '',
    component: CustomerListComponent
  }
];

路由定義使用組件類型引用了一個組件:component: CustomerListComponent。

所有路由組件都必須是入口組件。這需要你把同一個組件添加到兩個地方(路由中和 entryComponents 中),但編譯器足夠聰明,可以識別出這里是一個路由定義,因此它會自動把這些路由組件添加到 entryComponents 中。

entryComponents 數(shù)組

雖然 @NgModule 裝飾器具有一個 entryComponents 數(shù)組,但大多數(shù)情況下你不用顯式設置入口組件,因為 Angular 會自動把 @NgModule.bootstrap 中的組件以及路由定義中的組件添加到入口組件中。 雖然這兩種機制足夠自動添加大多數(shù)入口組件,但如果你要用其它方式根據(jù)類型來命令式的引導或動態(tài)加載某個組件,你就必須把它們顯式添加到 entryComponents 中了。

entryComponents 和編譯器

對于生產(chǎn)環(huán)境的應用,你總是希望加載盡可能小的代碼。 這些代碼應該只包含你實際使用到的類,并且排除那些從未用到的組件。因此,Angular 編譯器只會為那些可以從 entryComponents 中直接或間接訪問到的組件生成代碼。 這意味著,僅僅往 @NgModule.declarations 中添加更多引用,并不能表達出它們在最終的代碼包中是必要的。

實際上,很多庫聲明和導出的組件都是你從未用過的。 比如,Material Design 庫會導出其中的所有組件,因為它不知道你會用哪一個。然而,顯然你也不打算全都用上。 對于那些你沒有引用過的,搖樹優(yōu)化工具就會把這些組件從最終的代碼包中摘出去。

如果一個組件既不是入口組件也沒有在模板中使用過,搖樹優(yōu)化工具就會把它扔出去。 所以,最好只添加那些真正的入口組件,以便讓應用盡可能保持精簡。

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號