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


Posted in Javascript onJuly 05, 2017

前言

为了让大家学习起来轻松、易懂,小编尽量做到篇幅短,语言通俗易懂,知识点分段来讲,以免太长了看起来很累,也很容易失去耐心阅读下去,希望大家理解和支持,同时希望大家点赞和分享出去,让更多的志同道合的朋友来学习

Angular 提供了@Input和@Output语法来处理组件数据的流入流出,接下来我们通过@Input和@Output来演示父子组建之间的数据传递

父组件向子组件传递数据

父组件传递数据到子组件通过@Input方式的现实方式

第一步:定义父组件

ParentComponent.ts

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

(1).这里定义了两个类属性user和parent_data,

(2).一个next()方法,next方法用于将页面输入的数据赋值给parent_data属性

ParentComponent.html

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

对应的页面:

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

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

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

表单输入数据,点击页面上的按钮,调用页面next()方法

next()方法内部将输入的数据user赋值给parent_data。parent_data获取到数据之后在模版中把获取到的值再赋给子组件中先前定义好的data变量到这里父组件就完成 类数据的传递,下面我们看看子组件怎么去接受这个值?

第二步:定义子组件:

ChildenComponent.ts

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

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

(1).这里定义了一个类属性data,并且用@Input装饰器修饰,修饰过后的data变量就具备接受父组件传过来的数据了,这里定义的data就是在页面接收父组件传递的data变量,看下面代码(2).还实现了一个onChanges接口,onChanges接口必须实现ngOnChanges方法,用来监控数据的变化,如果父组件的数据发生变化,我们这里就输出改变后的数据,父组件中表单输入的值发生变化,再点击按钮调用next()方法,ngonChanges会检测到数据变化, console.log(this.data)打印新的输出到控制台

下面我们看看效果

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

总结

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

Javascript 相关文章推荐
Js获取数组最大和最小值示例代码
Oct 29 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
javascript实现拼图游戏
Jan 29 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 #Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 #Javascript
Angular2 自定义validators的实现方法
Jul 05 #Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 #Javascript
使用angular帮你实现拖拽的示例
Jul 05 #Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 #Javascript
jquery拖动改变div大小
Jul 04 #jQuery
You might like
PHP中的正规表达式(二)
2006/10/09 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python脚本监控docker容器
2016/04/27 Python
python实现按任意键继续执行程序
2016/12/30 Python
python制作小说爬虫实录
2017/08/14 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
python开根号实例讲解
2020/08/30 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
12月小学生校园广播稿
2014/02/04 职场文书
五一劳动节活动记录
2014/03/23 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
2014年实验室工作总结
2014/12/03 职场文书
2014司机年终工作总结
2014/12/05 职场文书
岗位聘任报告
2015/03/02 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
Python OpenCV实现图像模板匹配详解
2022/04/07 Python