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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
Angular网络请求的封装方法
May 22 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
详解Vue底部导航栏组件
May 02 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 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
Mysql的常用命令
2006/10/09 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
EsLint入门学习教程
2017/02/17 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
分析Python中解析构建数据知识
2018/01/20 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
高三历史教学反思
2014/01/09 职场文书
小组合作学习反思
2014/02/18 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
分公司经理任命书
2014/06/05 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js