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常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
js实现表格筛选功能
2017/01/18 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
python爬虫实现中英翻译词典
2019/06/25 Python
Python 画出来六维图
2019/07/26 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
给老婆的保证书范文
2014/04/28 职场文书
大学生社会实践方案
2014/05/11 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
2014年教务工作总结
2014/12/03 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
JavaScript实现简单的音乐播放器
2022/08/14 Javascript
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技