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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
js常见表单应用技巧
Jan 09 Javascript
javascript web页面刷新的方法收集
Jul 02 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
vue项目前端错误收集之sentry教程详解
May 27 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中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
详解react组件通讯方式(多种)
2020/05/06 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
Python 列表list使用介绍
2014/11/30 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
J2EE面试题大全
2016/08/06 面试题
理工类毕业自我鉴定
2014/02/20 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
单位租房协议书样本
2014/10/30 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
入党群众意见范文
2015/06/02 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
python中__slots__节约内存的具体做法
2021/07/04 Python
Ajax实现异步加载数据
2021/11/17 Javascript