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或css实现滚动广告的几种方案
Jan 28 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
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获取MAC地址的具体实例
2013/12/13 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
CI框架的安全性分析
2016/05/18 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
Python socket编程实例详解
2015/05/27 Python
Django中url的反向查询的方法
2018/03/14 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
使用Python实现分别输出每个数组
2019/12/06 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
extern是什么意思
2016/03/10 面试题
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
领导干部对照检查材料
2014/08/24 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
卡特教练观后感
2015/06/08 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL