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 相关文章推荐
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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
对盗链说再见...
2006/10/09 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
实现PHP搜索加分页
2016/10/12 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
软件部经理岗位职责范本
2014/02/25 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
效能监察建议书
2014/05/19 职场文书
党课心得体会范文
2014/09/09 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
HTML+JS实现在线朗读器
2022/02/15 Javascript