Angular入口组件(entry component)与声明式组件的区别详解


Posted in Javascript onApril 09, 2018

前言

组件是Angular中很重要的一部分,下面这篇文章就来给大家介绍关于Angular入口组件(entry component)与声明式组件的区别,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里。

@NgModule({ declarations: [  AppComponent ], imports: [  BrowserModule,  BrowserAnimationsModule,  AppRoutingModule ], providers: [], entryComponents:[DialogComponent], declarations:[] bootstrap: [AppComponent] }) export class AppModule { }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
用一段js程序来实现动画功能
Mar 06 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
快速搭建vue2.0+boostrap项目的方法
Apr 09 #Javascript
webpack 模块热替换原理
Apr 09 #Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 #Javascript
浅谈webpack 自动刷新与解析
Apr 09 #Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 #Javascript
详解webpack 入门与解析
Apr 09 #Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 #Javascript
You might like
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php 静态变量的初始化
2009/11/15 PHP
PHP查询网站的PR值
2013/10/30 PHP
jQuery的事件委托实例分析
2015/07/15 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
浅析Python中的for 循环
2016/06/09 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python Series从0开始索引的方法
2018/11/06 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
浅谈django channels 路由误导
2020/05/28 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
超市后勤自我鉴定
2014/01/17 职场文书
个人自我评价范文
2014/02/05 职场文书
高中军训感言200字
2014/02/23 职场文书
《画》教学反思
2014/04/14 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
收银员岗位职责
2015/02/03 职场文书
初中数学教学随笔
2015/08/15 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript