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中for/in循环及使用技巧
Sep 01 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
VueJs监听window.resize方法示例
Jan 17 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
vue请求数据的三种方式
Mar 04 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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记录日志的实现代码
2011/08/08 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
python中logging库的使用总结
2017/10/18 Python
python在非root权限下的安装方法
2018/01/23 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
学生党支部先进事迹
2014/02/04 职场文书
公司保密承诺书
2014/03/27 职场文书
本溪关门山导游词
2015/02/09 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
MySQL数据库表约束讲解
2022/06/21 MySQL