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 相关文章推荐
js 数组的for循环到底应该怎么写?
May 31 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
layui数据表格跨行自动合并的例子
Sep 02 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 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
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
Node.js编码规范
2014/07/14 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
详解Python中的循环语句的用法
2015/04/09 Python
python动态性强类型用法实例
2015/05/09 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python手写均值滤波
2020/02/19 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
大学同学聚会邀请函
2014/01/19 职场文书
个人作风剖析材料
2014/02/02 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书