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 私有成员分析
Jan 13 Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
详解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
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
python里对list中的整数求平均并排序
2014/09/12 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
Python实现代码统计工具
2019/09/19 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
八年级生物教学反思
2014/01/22 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
2014年材料员工作总结
2014/11/19 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript