Angular父组件调用子组件的方法
Angular组件是一种特殊的指令，使用更简单的配置项来构建基于组件的应用程序架构。在本文中，我们将深入探讨Angular组件——父组件调用子组件方法，并为读者提供了详细的实现步骤和代码示例。
一、什么是Angular组件？
Angular组件是一种特殊的指令，使用更简单的配置项来构建基于组件的应用程序架构。它提供了更好的默认设置和最好的实践对基于组建的应用架构更优化。组件只能通过元素标签触发，其他的只能用命令。
二、父组件调用子组件的方法
父组件调用子组件的方法是通过ViewChild装饰器来实现的。ViewChild装饰器可以获取子组件的引用，然后就可以调用子组件的方法。
我们需要创建一个子组件Child1，里面只有一个greeting方法供父组件调用。
```
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-child1',
templateUrl: './child1.component.html',
styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
constructor() { }
ngOnInit() { }
greeting(name: string) {
console.log("hello" + name);
}
}
```
然后，在父组件中，我们需要使用ViewChild装饰器来获取子组件的引用。
```
@ViewChild('child1') child1: Child1Component;
```
在父组件的模板中，我们可以使用模板变量来调用子组件的方法。
```
<app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>
<button (click)="child2.greeting('Jerry')">调用child2的greeting方法</button>
```
在父组件的控制器中，我们可以使用ViewChild装饰器来获取子组件的引用，然后调用子组件的方法。
```
ngOnInit(){
this.child1.greeting("Tom");
}
```
三、优点和限制
使用Angular组件的优点是：
* 提供了更好的默认设置和最好的实践对基于组建的应用架构更优化。
* 对angular2的升级更平滑。
但是，使用Angular组件也有一些限制：
* 对那些在compile或者pre-link阶段要执行操作的指令，组件不能用，因为无法到达那个阶段。
* 如果你想定义指令的priority，terminal，multi-element，也不能用。
四、总结
在本文中，我们介绍了Angular组件——父组件调用子组件方法的实现步骤和代码示例。我们也讨论了使用Angular组件的优点和限制。希望本文能够对大家有所帮助。如果大家有任何疑问，请及时与我们联系。
