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.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
详解JavaScript数据类型和判断方法
Sep 04 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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生成Flash动画的实现代码
2010/03/12 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
PHP合并静态文件详解
2014/11/14 PHP
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
Python 加密与解密小结
2018/12/06 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Python 使用office365邮箱的示例
2020/10/29 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
幼儿园亲子活动方案
2014/01/29 职场文书
绩效管理实施方案
2014/03/19 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
文化大革命观后感
2015/06/17 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android