这篇文章主要给大家介绍了关于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父子组件数据传递之局部变量获取子组件其他成员》只能在模版中使用子组件引入的缺陷
最终效果跟上面结果一样
总结
以上就是Angular 2父子组件数据传递之@ViewChild获取子组件详解的详细内容,更多请关注易知道|edz.cc其它相关文章!