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 相关文章推荐
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
node中的session的具体使用
Sep 14 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
js实现百度淘宝搜索功能
Feb 17 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
PHP 实现缩略图
2021/03/09 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
JavaScript中的History历史对象
2008/01/16 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
浅谈node的事件机制
2017/10/09 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python静态方法实例
2015/01/14 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
python基础教程之五种数据类型详解
2017/01/12 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Python类如何定义私有变量
2020/02/03 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
大四自我鉴定
2014/02/08 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python