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 相关文章推荐
js实现单一html页面两套css切换代码
Apr 11 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
loading动画特效小结
Jan 22 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
微信小程序实现星级评分和展示
Jul 05 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 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中的字符串函数
2006/11/24 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php缓存技术详细总结
2013/08/07 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
五段实用的js高级技巧
2011/12/20 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
在Python中使用模块的教程
2015/04/27 Python
python实现的简单抽奖系统实例
2015/05/22 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
一些Solaris面试题
2013/03/22 面试题
市场营销专业推荐信
2013/11/03 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
购房个人委托书范本
2014/10/11 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL