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 相关文章推荐
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 Javascript
深入了解Vue动态组件和异步组件
Jan 26 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简介
2006/10/09 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php继承的一个应用
2011/09/06 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
分析javascript原型及原型链
2018/03/18 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python连接DB2数据库
2016/08/27 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
家长对小学生的评语
2014/01/28 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
大学社团计划书
2014/05/01 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
电子工程求职信
2014/07/17 职场文书
停发工资证明范本
2015/06/12 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP