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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
JS 树形递归实例代码
May 18 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
jquery实现下载图片功能
Jul 18 jQuery
微信小程序背景音乐开发详解
Dec 12 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/07 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python打开使用的方法
2019/09/30 Python
Python 中@property的用法详解
2020/01/15 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
Python中的Cookie模块如何使用
2020/06/04 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
总经理岗位职责
2015/02/04 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
用Python实现屏幕截图详解
2022/01/22 Python