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 经典动画菜单效果代码
Jan 26 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
js实现返回顶部效果
Mar 10 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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生成UTF8文件的方法
2010/05/15 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
简述vue中的config配置
2018/01/23 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
python 如何调用远程接口
2020/09/11 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
分公司经理岗位职责
2013/11/11 职场文书
劳资专员岗位职责
2013/12/27 职场文书
运动会广播稿50字
2014/01/26 职场文书
合作协议书
2014/04/23 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python