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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
python输出数学符号实例
2020/05/11 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
统计员岗位职责范本
2015/04/14 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书