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 设置文本框中焦点的位置
Nov 20 Javascript
js下获取div中的数据的原理分析
Apr 07 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
react-router实现按需加载
May 09 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
使用php计算排列组合的方法
2013/11/13 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
virtualenv介绍及简明教程
2020/06/23 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
《颐和园》教学反思
2014/02/26 职场文书
给老婆的保证书范文
2014/04/28 职场文书
2014年客房部工作总结
2014/11/22 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
介绍信怎么写
2015/05/05 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL