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 相关文章推荐
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
Vue简单实现原理详解
May 07 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PDO::commit讲解
2019/01/27 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
python解析xml文件实例分享
2013/12/04 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python Tensor和Array对比分析
2020/01/08 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
跟单文员的岗位职责
2013/11/14 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android