转:
entry component 示意 angular 的入口组件。
它次要能够分为疏导入口组件和路由到的入口组件。
可疏导组件是一个入口组件,Angular 会在疏导过程中把它加载到 DOM 中。 其它入口组件是在其它机会动静加载的,比方用路由器。
入口组件是在entryComponents 数组中申明的。
然而通常咱们不须要显示的在entryComponents 数组中申明,因为angular足够聪慧,它会主动的把bootStrap 中的组件以及路由器导航到的组件主动的加载到entryComponents 数组中去。尽管这种机制能实用大多数状况,然而如果是一些非凡的命令式的疏导或者动静的加载某个组件(比方对话框组件),那么你必须被动的把这个组件申明到entryComponents 数组中去。
angular编译器会为那些能够从entryComponents 数组中获得的或者能够间接获得的组件生成生产环境的代码。因而,你能够只将必须应用的组件申明在entryComponents 数组中。
Angular的申明式组件和入口组件的区别体现在两者的加载形式不同。
- 申明式组件是通过组件申明的selector加载
入口组件(entry component)是通过组件的类型动静加载
申明式组件
申明式组件会在模板里通过组件申明的selector加载组件。
示例
@Component({ selector: 'a-cmp', template: ` <p>这是A组件</p> `})export class AComponent {}
@Component({ selector: 'b-cmp', template: ` <p>在B组件里内嵌A组件:</p> <a-cmp></a-cmp> `})export class BComponent {}
在BComponent的模板里,应用selector<a-cmp></a-cmp>申明加载AComponent。入口组件(entry component)
入口组件是通过指定的组件类加载组件。
次要分为三类:
- 在@NgModule.bootstrap里申明的启动组件,如AppComponent。
- 在路由配置里援用的组件
- 其余通过编程应用组件类型加载的动静组件
启动组件
app.component.ts
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss']})export class AppComponent{}
app.module.ts
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent]})export class AppModule { }
在bootstrap里申明的AppComponent为启动组件。尽管咱们会在index.html里应用组件的selector<app-root></app-root>的地位,然而Angular并不是依据此selector来加载AppComponent。这是容易让人误会的中央。因为index.html不属于任何组件模板,Angular须要通过编程应用bootstrap里申明的AppComponent类型加载组件,而不是应用selector。
因为Angular动静加载AppComponent,所有AppComponent是一个入口组件。
路由配置援用的组件
@Component({ selector: 'app-nav', template: ` <nav> <a routerLink="/home" routerLinkActive #rla="routerLinkActive" selected="#rla.isActive">首页</a> <a routerLink="/users" routerLinkActive #rla="routerLinkActive" selected="#rla.isActive">用户</a> </nav> <router-outlet></router-outlet> `})export class NavComponent {}
咱们须要配置一个路由
const routes: Routes = [ { path: "home", component: HomeComponent }, { path: "user", component: UserComponent }];@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]})export class AppRoutingModule { }
Angular依据配置的路由,依据路由指定的组件类来加载组件,而不是通过组件的selector加载。
配置入口组件
在Angular里,对于入库组件须要在@NgModule.entryComponents里配置。
因为启动组件和路由配置里援用的组件都为入口组件,Angular会在编译时主动把这两种组件增加到@NgModule.entryComponents里。对于咱们本人编写的动静组件须要手动增加到@NgModule.entryComponents里。