脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular2父子组件数据传递 @ViewChild获取子组件

Angular 2父子组件数据传递之@ViewChild获取子组件详解

 更新时间：2017年07月04日 11:19:52   作者：小处成就大事  
这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@ViewChild获取子组件的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定参考学习价值，需要的朋友们下面来一起看看吧。

前言

之前在《Angular 2父子组件数据传递之局部变量获取子组件其他成员》讲到过（如果有不懂的，可以先去看看），通过在子组件模版上设置局部变量的方式获取子组件的成员变量，但是有一个限制，必须在父组件的模版中设置局部变量才能够获取到子组件成员。那有没有办法实现不依赖于局部变量获取子组件成员呢？ 答案：肯定是有的，接下来我们讲下通过@ViewChild来实现！

淡描@ViewChild

@ViewChild的作用是声明对子组件元素的实例引用，意思是通过注入的方式将子组件注入到@ViewChild容器中，你可以想象成依赖注入的方式注入，只不过@ViewChild不能在构造器constructor中注入，因为@ViewChild会在ngAfterViewInit()回调函数之前执行。

@VIewChild提供了一个参数来选择将要引入的组件元素，可以是一个子组件实例引用， 也可以是一个字符串(两者的区别，后面会讲)


下面我们来介绍一下两种用法。

1、当传入的是一个子组件实例引用

childenConponetn.ts


1、定义了一个类方法fun1() ，提供给父组件调用

parentComponent.ts


1、这里传入一个子组件实例引入，定义了一个变量child接收

2、定义了Onclick()方法，用于页面触发点击事件，模拟调用子组件中的方法

parentComponetn.html


1、父组件模版中input绑定了一个click点击事件，页面触发点击调用OnClick()方法

最终效果如下：

2、当传入的是一个字符串

parentComponent.ts


1、@ViewChild传入一个字符串myChild，变量child接收。其它不变

parentComponent.html


1、细心的你会发现这里在子组件模版中创建了一个局部变量#myChild，父组件中的myChild字符串解释为一个选择器。也就是一个元素包含模版局部变量#myChild，这就是与第一种方式唯一不同的地方，这里弥补了《Angular 2父子组件数据传递之局部变量获取子组件其他成员》只能在模版中使用子组件引入的缺陷

最终效果跟上面结果一样

总结

关于@ViewChild还有很多东西可说，这里我不做多说，我会在以后的文章中，单独写一遍来讲，感兴趣的朋友们请继续关注脚本之家。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

    AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

    这篇文章主要介绍了AngularJS整合Springmvc、Spring、Mybatis搭建开发环境的相关资料，为学习使用AngularJS做好基础准备，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • angular.js中解决跨域问题的三种方式

    angular.js中解决跨域问题的三种方式

    跨域，前端开发中经常遇到的问题，下面这篇文章主要给大家介绍了关于angular.js中解决跨域问题的三种方式，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • 详解angular2封装material2对话框组件

    详解angular2封装material2对话框组件

    本篇文章主要介绍了详解angular2封装material2对话框组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • AngularJS ng-repeat指令及Ajax的应用实例分析

    AngularJS ng-repeat指令及Ajax的应用实例分析

    这篇文章主要介绍了AngularJS ng-repeat指令及Ajax的应用,结合实例形式分析了ng-repeat指令的功能及ajax请求交互相关操作技巧,需要的朋友可以参考下
    2017-07-07
  • 详解AngularJS如何实现跨域请求

    详解AngularJS如何实现跨域请求

    跨域请求一直是网页编程中的一个难题，在过去，绝大多数人都倾向于使用JSONP来解决这一问题。不过现在，我们可以考虑一下W3C中一项新的特性——CORS（Cross-Origin Resource Sharing）了。
    2016-08-08
  • 对angularJs中ng-style动态改变样式的实例讲解

    对angularJs中ng-style动态改变样式的实例讲解

    今天小编就为大家分享一篇对angularJs中ng-style动态改变样式的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Angular.js 4.x中表单Template-Driven Forms详解

    Angular.js 4.x中表单Template-Driven Forms详解

    Angular 4.x 中有两种表单，一种是Template-Driven Forms - 模板驱动式表单，另外一种是Reactive Forms - 响应式表单 ，下面这篇文章主要给大家介绍了Angular.js 4.x中表单Template-Driven Forms的相关资料，需要的朋友可以参考学习，下面来一起看看吧。
    2017-04-04
  • angularJS与bootstrap结合实现动态加载弹出提示内容

    angularJS与bootstrap结合实现动态加载弹出提示内容

    这篇文章主要介绍了angularJS与bootstrap结合实现动态加载弹出提示内容,通过bootstrp弹出提示。感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • 详解使用angular的HttpClient搭配rxjs

    详解使用angular的HttpClient搭配rxjs

    本篇文章主要介绍了详解使用angular的HttpClient搭配rxjs ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 测试IE浏览器对JavaScript的AngularJS的兼容性

    测试IE浏览器对JavaScript的AngularJS的兼容性

    这篇文章主要介绍了测试IE浏览器对JavaScript的AngularJS的兼容性的方法,尽管随着Windows10的近期上市,IE浏览器即将成为历史...需要的朋友可以参考下
    2015-06-06

最新评论