Angular 2父子组件数据传递之@ViewChild获取子组件详解


Posted in Javascript onJuly 04, 2017

前言

之前在《Angular 2父子组件数据传递之局部变量获取子组件其他成员》讲到过(如果有不懂的,可以先去看看),通过在子组件模版上设置局部变量的方式获取子组件的成员变量,但是有一个限制,必须在父组件的模版中设置局部变量才能够获取到子组件成员。那有没有办法实现不依赖于局部变量获取子组件成员呢? 答案:肯定是有的,接下来我们讲下通过@ViewChild来实现!

淡描@ViewChild

@ViewChild的作用是声明对子组件元素的实例引用,意思是通过注入的方式将子组件注入到@ViewChild容器中,你可以想象成依赖注入的方式注入,只不过@ViewChild不能在构造器constructor中注入,因为@ViewChild会在ngAfterViewInit()回调函数之前执行。

@VIewChild提供了一个参数来选择将要引入的组件元素,可以是一个子组件实例引用, 也可以是一个字符串(两者的区别,后面会讲)

Angular 2父子组件数据传递之@ViewChild获取子组件详解

下面我们来介绍一下两种用法。

1、当传入的是一个子组件实例引用

childenConponetn.ts

Angular 2父子组件数据传递之@ViewChild获取子组件详解

1、定义了一个类方法fun1() ,提供给父组件调用

parentComponent.ts

Angular 2父子组件数据传递之@ViewChild获取子组件详解

1、这里传入一个子组件实例引入,定义了一个变量child接收

2、定义了Onclick()方法,用于页面触发点击事件,模拟调用子组件中的方法

parentComponetn.html

Angular 2父子组件数据传递之@ViewChild获取子组件详解

1、父组件模版中input绑定了一个click点击事件,页面触发点击调用OnClick()方法

最终效果如下:

Angular 2父子组件数据传递之@ViewChild获取子组件详解

2、当传入的是一个字符串

parentComponent.ts

Angular 2父子组件数据传递之@ViewChild获取子组件详解

1、@ViewChild传入一个字符串myChild,变量child接收。其它不变

parentComponent.html

Angular 2父子组件数据传递之@ViewChild获取子组件详解

1、细心的你会发现这里在子组件模版中创建了一个局部变量#myChild,父组件中的myChild字符串解释为一个选择器。也就是一个元素包含模版局部变量#myChild,这就是与第一种方式唯一不同的地方,这里弥补了《Angular 2父子组件数据传递之局部变量获取子组件其他成员》只能在模版中使用子组件引入的缺陷

最终效果跟上面结果一样

总结

关于@ViewChild还有很多东西可说,这里我不做多说,我会在以后的文章中,单独写一遍来讲,感兴趣的朋友们请继续关注三水点靠木。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
Mar 01 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
javascript实现放大镜功能
Dec 09 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 #Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 #Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 #Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 #Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 #jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 #jQuery
You might like
php header Content-Type类型小结
2011/07/03 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
python选择排序算法实例总结
2015/07/01 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
中学教师岗位职责
2013/11/26 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
公司门卫管理制度
2014/02/01 职场文书
小学作文评语大全
2014/04/21 职场文书
委托书如何写
2014/08/30 职场文书
学习党代会心得体会
2014/09/05 职场文书
2015年推普周活动总结
2015/03/27 职场文书