W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
從分類上說,入口組件是 Angular 命令式加載的任意組件(也就是說你沒有在模板中引用過它), 你可以在 NgModule
中引導(dǎo)它,或把它包含在路由定義中來指定入口組件。
對(duì)比一下這兩種組件類型:有一類組件被包含在模板中,它們是聲明式加載的;另一類組件你會(huì)命令式加載它,這就是入口組件。
入口組件有兩種主要的類型:
下面這個(gè)例子中指定了一個(gè)引導(dǎo)用組件 AppComponent
,位于基本的 "app.module.ts" 中:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent] // bootstrapped entry component
})
可引導(dǎo)組件是一個(gè)入口組件,Angular 會(huì)在引導(dǎo)過程中把它加載到 DOM 中。 其它入口組件是在其它時(shí)機(jī)動(dòng)態(tài)加載的,比如用路由器。
Angular 會(huì)動(dòng)態(tài)加載根組件 AppComponent
,是因?yàn)樗念愋妥鳛閰?shù)傳給了 @NgModule.bootstrap
函數(shù)。
組件也可以在該模塊的
ngDoBootstrap()
方法中進(jìn)行命令式引導(dǎo)。@NgModule.bootstrap
屬性告訴編譯器,這里是一個(gè)入口組件,它應(yīng)該生成代碼,來使用這個(gè)組件引導(dǎo)該應(yīng)用。
引導(dǎo)用的組件必須是入口組件,因?yàn)橐龑?dǎo)過程是命令式的,所以它需要一個(gè)入口組件。
入口組件的第二種類型出現(xiàn)在路由定義中,就像這樣:
const routes: Routes = [
{
path: '',
component: CustomerListComponent
}
];
路由定義使用組件類型引用了一個(gè)組件:component: CustomerListComponent
。
所有路由組件都必須是入口組件。這需要你把同一個(gè)組件添加到兩個(gè)地方(路由中和 entryComponents
中),但編譯器足夠聰明,可以識(shí)別出這里是一個(gè)路由定義,因此它會(huì)自動(dòng)把這些路由組件添加到 entryComponents
中。
雖然 @NgModule
裝飾器具有一個(gè) entryComponents
數(shù)組,但大多數(shù)情況下你不用顯式設(shè)置入口組件,因?yàn)?Angular 會(huì)自動(dòng)把 @NgModule.bootstrap
中的組件以及路由定義中的組件添加到入口組件中。 雖然這兩種機(jī)制足夠自動(dòng)添加大多數(shù)入口組件,但如果你要用其它方式根據(jù)類型來命令式的引導(dǎo)或動(dòng)態(tài)加載某個(gè)組件,你就必須把它們顯式添加到 entryComponents
中了。
對(duì)于生產(chǎn)環(huán)境的應(yīng)用,你總是希望加載盡可能小的代碼。 這些代碼應(yīng)該只包含你實(shí)際使用到的類,并且排除那些從未用到的組件。因此,Angular 編譯器只會(huì)為那些可以從 entryComponents
中直接或間接訪問到的組件生成代碼。 這意味著,僅僅往 @NgModule.declarations
中添加更多引用,并不能表達(dá)出它們?cè)谧罱K的代碼包中是必要的。
實(shí)際上,很多庫聲明和導(dǎo)出的組件都是你從未用過的。 比如,Material Design 庫會(huì)導(dǎo)出其中的所有組件,因?yàn)樗恢滥銜?huì)用哪一個(gè)。然而,顯然你也不打算全都用上。 對(duì)于那些你沒有引用過的,搖樹優(yōu)化工具就會(huì)把這些組件從最終的代碼包中摘出去。
如果一個(gè)組件既不是入口組件也沒有在模板中使用過,搖樹優(yōu)化工具就會(huì)把它扔出去。 所以,最好只添加那些真正的入口組件,以便讓應(yīng)用盡可能保持精簡。
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)系方式:
更多建議: