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 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
JavaScript页面倒计时功能完整示例
May 15 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
php简单提示框alert封装函数
2010/08/08 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Django开发中复选框用法示例
2018/03/20 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
大学生实习感言
2014/01/16 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
字节飞书面试promise.all实现示例
2022/06/16 Javascript