[b]前言[/b] 之前在《[url=http://www.1sucai.cn/article/117781.htm]Angular 2父子组件数据传递之局部变量获取子组件其他成员[/url]》讲到过（如果有不懂的，可以先去看看），通过在子组件模版上设置局部变量的方式获取子组件的成员变量，但是有一个限制，必须在父组件的模版中设置局部变量才能够获取到子组件成员。那有没有办法实现不依赖于局部变量获取子组件成员呢？ 答案：肯定是有的，接下来我们讲下通过@ViewChild来实现！ [b]淡描@ViewChild[/b] @ViewChild的作用是声明对子组件元素的实例引用，意思是通过注入的方式将子组件注入到@ViewChild容器中，你可以想象成依赖注入的方式注入，只不过@ViewChild不能在构造器constructor中注入，因为@ViewChild会在ngAfterViewInit()回调函数之前执行。 @VIewChild提供了一个参数来选择将要引入的组件元素，可以是一个子组件实例引用， 也可以是一个字符串(两者的区别，后面会讲) [img]http://files.jb51.net/file_images/article/201707/201774111319815.png?201764111327[/img] [b]下面我们来介绍一下两种用法。[/b] [b]1、当传入的是一个子组件实例引用[/b] childenConponetn.ts [img]http://files.jb51.net/file_images/article/201707/201774111447148.png?201764111455[/img] 1、定义了一个类方法[code]fun1()[/code] ，提供给父组件调用 parentComponent.ts [img]http://files.jb51.net/file_images/article/201707/201774111509615.png?201764111516[/img] 1、这里传入一个子组件实例引入，定义了一个变量child接收 2、定义了Onclick()方法，用于页面触发点击事件，模拟调用子组件中的方法 parentComponetn.html [img]http://files.jb51.net/file_images/article/201707/201774111555972.png?20176411163[/img] 1、父组件模版中input绑定了一个click点击事件，页面触发点击调用[code]OnClick()[/code]方法 最终效果如下： [img]http://files.jb51.net/file_images/article/201707/201774111749446.png?201764111759[/img] 2、当传入的是一个字符串 parentComponent.ts [img]http://files.jb51.net/file_images/article/201707/201774111818992.png?201764111826[/img] 1、@ViewChild传入一个字符串myChild，变量child接收。其它不变 parentComponent.html [img]http://files.jb51.net/file_images/article/201707/201774111838236.png?201764111845[/img] 1、细心的你会发现这里在子组件模版中创建了一个局部变量#myChild，父组件中的myChild字符串解释为一个选择器。也就是一个元素包含模版局部变量#myChild，这就是与第一种方式唯一不同的地方，这里弥补了《[url=http://www.1sucai.cn/article/117781.htm]Angular 2父子组件数据传递之局部变量获取子组件其他成员[/url]》只能在模版中使用子组件引入的缺陷 最终效果跟上面结果一样 [b]总结[/b] 关于@ViewChild还有很多东西可说，这里我不做多说，我会在以后的文章中，单独写一遍来讲，感兴趣的朋友们请继续关注编程素材网。 好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程素材网的支持。