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 二维数组
Nov 26 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
让Vue响应Map或Set的变化操作
Nov 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加密解密函数(动态加密)
2013/06/19 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
vue实现分页组件
2020/06/16 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
Django实现文件上传下载
2019/10/06 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
心得体会开头
2014/01/01 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
怎么用Python识别手势数字
2021/06/07 Python
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
MySQL 计算连续登录天数
2022/05/11 MySQL
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis