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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
javascript 获取表单file全路径
Dec 31 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
浅谈javascript错误处理
Aug 11 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
Angular开发实践之服务端渲染
2018/03/29 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Python实现自动签到脚本功能
2020/08/20 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
软件测试笔试题
2012/10/25 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
群众路线教育党课主持词
2014/04/01 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
社会公德演讲稿
2014/05/20 职场文书
微笑服务标语
2014/06/24 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
单位综合评价意见
2015/06/05 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python