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 相关文章推荐
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
axios基本入门用法教程
Mar 25 Javascript
jquery append与appendTo方法比较
May 24 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
详解JavaScript 的执行机制
Sep 18 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水印
2007/03/16 PHP
php可变长参数处理函数详解
2017/02/22 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
繁简字转换功能
2006/07/19 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
跟老齐学Python之集合(set)
2014/09/24 Python
python实现简单的TCP代理服务器
2014/10/08 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
python statsmodel的使用
2020/12/21 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
英国航空官网:British Airways
2016/09/11 全球购物
非常详细的C#面试题集
2016/07/13 面试题
介绍一下linux文件系统分配策略
2013/02/25 面试题
高三自我鉴定
2013/10/23 职场文书
高中军训感想300字
2014/03/04 职场文书
中介业务员岗位职责
2014/04/09 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
Oracle 死锁的检测查询及处理
2021/09/25 Oracle