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 相关文章推荐
深入解析contentWindow, contentDocument
Jul 04 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
react项目实践之webpack-dev-serve
Sep 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中把对象转换为关联数组代码分享
2015/04/09 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
python实现ftp文件传输功能
2020/03/20 Python
python语言中有算法吗
2020/06/16 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
举例讲解Python装饰器
2020/12/24 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
医学专业毕业生推荐信
2013/11/14 职场文书
给实习单位的感谢信
2014/02/01 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
停发工资证明范本
2015/06/12 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers