返回首页 | 申博娱乐APP下载

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

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

时间:2017-09-09 编辑:admin

之前在《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父子组件数据传递之局部变量获取子组件其他成员》只能在模版中运用子组件引进的缺点

终究作用跟上面成果一样


浏览:

网站建设

流程

    网站建设流程