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 相关文章推荐
利用进制转换压缩数字函数分享
Jan 02 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
javascript实现日期格式转换
Dec 16 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
快速搭建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
PHP+javascript液晶时钟
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
linux中cd命令使用详解
2015/01/08 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
儿童编程python入门
2018/05/08 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
公安学专业求职信
2014/07/27 职场文书
行政处罚事先告知书
2015/07/01 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书