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 相关文章推荐
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 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
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
javascript 二维数组的实现与应用
2010/03/16 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
Python分割指定页数的pdf文件方法
2018/10/26 Python
python实现淘宝秒杀脚本
2020/06/23 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python cumsum函数的具体使用
2019/07/29 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
怎样声明接口
2014/09/19 面试题
这段代码难道不该打印出56吗
2013/02/27 面试题
护士实习生自我鉴定范文
2013/12/10 职场文书
中标通知书
2015/04/17 职场文书
发票退票证明
2015/06/24 职场文书
安全教育培训制度
2015/08/06 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
创业计划书之面包店
2019/09/12 职场文书