Angular 2父子组件数据传递之@ViewChild获取子组件详解
Angular 2中父子组件数据传递是非常重要的概念之一，而@ViewChild正是用于实现父子组件数据传递的重要工具之一。@ViewChild的作用是声明对子组件元素的实例引用，通过注入的方式将子组件注入到@ViewChild容器中。
在《Angular 2父子组件数据传递之局部变量获取子组件其他成员》中，我们了解到可以通过在子组件模版上设置局部变量的方式获取子组件的成员变量，但是有一个限制，必须在父组件的模版中设置局部变量才能够获取到子组件成员。那有没有办法实现不依赖于局部变量获取子组件成员呢？ 答案：肯定是有的，接下来我们讲下通过@ViewChild来实现！
@ViewChild提供了一个参数来选择将要引入的组件元素，可以是一个子组件实例引用，也可以是一个字符串。下面我们来介绍一下两种用法。
第一种用法：当传入的是一个子组件实例引用
在这个例子中，我们定义了一个子组件childComponent，并在父组件中通过@ViewChild来引入子组件。我们可以看到，在父组件中，我们定义了一个变量child来接收引入的子组件实例引用。
```typescript
// childComponent.ts
export class ChildComponent {
fun1() {
console.log('ChildComponent.fun1()');
}
}
```
```typescript
// parentComponent.ts
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
<child-component #child></child-component>
<button (click)="onClick()">Click me!</button>
`
})
export class ParentComponent {
@ViewChild(ChildComponent) child: ChildComponent;
onClick() {
this.child.fun1();
}
}
```
第二种用法：当传入的是一个字符串
在这个例子中，我们定义了一个父组件parentComponent，并在模版中创建了一个局部变量#myChild。我们可以看到，在父组件中，我们定义了一个变量child来接收引入的子组件实例引用。
```typescript
// parentComponent.ts
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<child-component #myChild></child-component>
<button (click)="onClick()">Click me!</button>
`
})
export class ParentComponent {
@ViewChild('myChild') child: any;
onClick() {
this.child.fun1();
}
}
```
@ViewChild是一种非常强大的工具，可以帮助我们实现父子组件数据传递。但是，需要注意的是，@ViewChild不能在构造器constructor中注入，因为@ViewChild会在ngAfterViewInit()回调函数之前执行。
希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
