Angular入口组件（entry component）与声明式组件的区别详解
前言
组件是Angular中很重要的一部分，下面这篇文章就来给大家介绍关于Angular入口组件（entrycomponent）与声明式组件的区别，Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。
- 声明式组件是通过组件声明的selector加载
入口组件（entrycomponent）是通过组件的类型动态加载
声明式组件
声明式组件会在模板里通过组件声明的selector加载组件。
示例
@Component({
selector:'a-cmp',
template:`
这是A组件
`
})
exportclassAComponent{}
@Component({
selector:'b-cmp',
template:`
在B组件里内嵌A组件：
在BComponent的模板里，使用selector
入口组件（entrycomponent）
入口组件是通过指定的组件类加载组件。
主要分为三类：
- 在@NgModule.bootstrap里声明的启动组件，如AppComponent。
- 在路由配置里引用的组件
- 其他通过编程使用组件类型加载的动态组件
启动组件
app.component.ts
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls:['./app.component.scss']
})
exportclassAppComponent{}
app.module.ts
@NgModule({
declarations:[
AppComponent
],
imports:[
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule
],
providers:[],
bootstrap:[AppComponent]
})
exportclassAppModule{}
在bootstrap里声明的AppComponent为启动组件。虽然我们会在index.html里使用组件的selector
由于Angular动态加载AppComponent，所有AppComponent是一个入口组件。
路由配置引用的组件
@Component({
selector:'app-nav',
template:`
我们需要配置一个路由
constroutes:Routes=[
{
path:"home",
component:HomeComponent
},
{
path:"user",
component:UserComponent
}
];
@NgModule({
imports:[RouterModule.forRoot(routes)],
exports:[RouterModule]
})
exportclassAppRoutingModule{}
Angular根据配置的路由，根据路由指定的组件类来加载组件，而不是通过组件的selector加载。
配置入口组件
在Angular里，对于入库组件需要在@NgModule.entryComponents里配置。
由于启动组件和路由配置里引用的组件都为入口组件，Angular会在编译时自动把这两种组件添加到@NgModule.entryComponents里。对于我们自己编写的动态组件需要手动添加到@NgModule.entryComponents里。
@NgModule({declarations:[AppComponent],imports:[BrowserModule,BrowserAnimationsModule,AppRoutingModule],providers:[],entryComponents:[DialogComponent],declarations:[]bootstrap:[AppComponent]})exportclassAppModule{}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。