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获取GridView选择的行内容
Apr 14 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
javascript删除数组元素的七个方法示例
Sep 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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
php 保留字列表
2012/10/04 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
PHP7 其他修改
2021/03/09 PHP
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
js函数排序的实例代码
2013/07/01 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python实现ID3决策树算法
2017/12/20 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python Collatz序列实现过程解析
2019/10/12 Python
Python气泡提示与标签的实现
2020/04/01 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
先进事迹报告会感言
2014/01/24 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
物流业务员岗位职责
2015/04/03 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python