Angular 2父子组件数据传递之@Input和@Output详解(下)


Posted in Javascript onJuly 05, 2017

前言

之前已经给大家介绍了Angular 2父子组件数据传递之@Input和@Output的相关内容,下面这篇文章我们再进一步的进行介绍:

子组件向父组件传递数据使用事件传递是子组件向父组件传递数据最常用的方式,子组件需要实例化EventEmitter类来订阅和触发自定义事件

第一步定义子组件

childenComponent.ts

Angular 2父子组件数据传递之@Input和@Output详解(下)

(1).实例化EventEmitter,赋值给event,event被@Output装饰器定义为输出属性,这样event具备了向上级传递数据的能力,通过调用EventEmitter类中定义的emit方法,来向上传递数据

(2).定义一个name属性,用于接受子组件页面的输入

(3).定义upward方法,用于子组件页面点击事件 触发事件调用,upward()方法里面调用自定义事件event来触发emit方法 传递数据

childenComponent.html

Angular 2父子组件数据传递之@Input和@Output详解(下)

第二步定义父组件

parentComponent.ts

Angular 2父子组件数据传递之@Input和@Output详解(下)

parentComponent.html

Angular 2父子组件数据传递之@Input和@Output详解(下)

父组件通过绑定自定义事件event ,来订阅来自子组件触发事件(这里是点击事件),当我们点击子组件上面的按钮,调用子组件的upward()方法,内部实现会调用this.event.emit(this.name);传递数据,自此父组件就能够监听自定义事件event。调用getData来接收传递过来的数据

最终效果:表单输入数据,点击页面按钮,数据传递到父组件,在显示出来

Angular 2父子组件数据传递之@Input和@Output详解(下)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 #Javascript
JS鼠标滚动分页效果示例
Jul 05 #Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 #Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 #Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 #Javascript
Angular2 自定义validators的实现方法
Jul 05 #Javascript
You might like
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
javascript window对象属性整理
2009/10/24 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
详解python时间模块中的datetime模块
2016/01/13 Python
python线程池threadpool实现篇
2018/04/27 Python
python语言元素知识点详解
2019/05/15 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
求网格中的黑点分布
2013/11/06 面试题
幼儿园中秋节活动方案
2014/02/06 职场文书
数学系毕业生求职信
2014/05/29 职场文书
生物技术专业求职信
2014/06/10 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2014年导购员工作总结
2014/11/18 职场文书
党支部先进事迹材料
2014/12/24 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
趣味运动会加油词
2015/07/18 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python