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 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
Seajs源码详解分析
Apr 02 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
javascript Keycode对照表
2009/10/24 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
python+pyqt5编写md5生成器
2019/03/18 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
上班睡觉检讨书
2014/01/09 职场文书
英文商务邀请信
2014/01/22 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
2014年少先队工作总结
2014/12/03 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
Django REST framework 限流功能的使用
2021/06/24 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript