Angular 2父子组件数据传递之局部变量获取子组件其他成员


Posted in Javascript onJuly 04, 2017

前言

本文主要介绍的是关于Angular 2父子组件之间数据传递之局部变量获取子组件其他成员的相关内容,话不多说,来看看详细介绍:

通过@Input和@Output可以实现数据之间的传递,但是无法获取子组件的类属性和类方法,接下来我们通过局部变量方式实现获取子组件其他成员

第一步:定义子组件:

ChildenComponent.ts

Angular 2父子组件数据传递之局部变量获取子组件其他成员

(1).子组件中之定义了一个fun1()方法,提供给父组件调用

第二步:定义父组件

ParentComponent.ts

Angular 2父子组件数据传递之局部变量获取子组件其他成员

ParentComponent.html

Angular 2父子组件数据传递之局部变量获取子组件其他成员

通过#号来标识一个变量, 这样在父组件模板中创建了一个局部变量#chiden来获取子组件的实例,调用子组件中的方法和属性。上面例子中我们定义了#chiden之后,绑定点击就可以调用子组件的方法了

看看效果

点击按钮,弹出子组件方法的alert('子组件方法');

Angular 2父子组件数据传递之局部变量获取子组件其他成员

总结

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

Javascript 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 #Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 #jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery简介_动力节点Java学院整理
Jul 04 #jQuery
JS实现给json数组动态赋值的方法示例
Mar 19 #Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 #Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 #jQuery
You might like
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
解析php中反射的应用
2013/06/18 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
python简单实现基数排序算法
2015/05/16 Python
编写Python CGI脚本的教程
2015/06/29 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
树莓派实现移动拍照
2019/06/22 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
公务员培训自我鉴定
2014/02/01 职场文书
青春寄语大全
2014/04/09 职场文书
新年寄语大全
2014/04/12 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
小学生安全保证书
2015/05/09 职场文书
公司财务管理制度
2015/08/04 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
Python基础详解之邮件处理
2021/04/28 Python
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
阿里云日志过滤器配置日志服务
2022/04/09 Servers