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 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
vue3.0实现插件封装
Dec 14 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
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
javascript实现微信分享
2014/12/23 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
python 提取文件的小程序
2009/07/29 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
外贸业务员的岗位职责
2013/11/23 职场文书
青年志愿者活动方案
2014/08/17 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
神秘岛读书笔记
2015/07/01 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python