Angular9 父组件调用子组件方法

在Angular 9中，要实现父组件调用子组件的方法，可以通过以下步骤进行操作：

1. 在子组件中定义一个公共方法，供父组件调用。可以在子组件的.ts文件中添加一个greeting方法，如引用\[1\]和引用\[2\]所示。

2. 在父组件的模板文件中，使用子组件的选择器来引入子组件。例如，如果子组件的选择器是`app-child`，则可以在父组件的模板文件中使用`<app-child></app-child>`来引入子组件。

3. 在父组件的.ts文件中，使用`@ViewChild`装饰器来获取子组件的实例。在父组件的类中添加一个ViewChild装饰器，如下所示：

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: \['./parent.component.css'\]
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  callChildMethod() {
    this.childComponent.greeting('John');
  }
}

在上面的代码中，我们使用`@ViewChild`装饰器来获取子组件的实例，并将其赋值给`childComponent`属性。

4. 在父组件的模板文件中，可以通过调用父组件的方法来触发子组件的方法。例如，可以在父组件的模板文件中添加一个按钮，并在按钮的点击事件中调用父组件的方法，如下所示：

<button (click)="callChildMethod()">调用子组件方法</button>

当点击按钮时，将会调用父组件的`callChildMethod`方法，从而触发子组件的`greeting`方法，并传递参数。

这样，就实现了在Angular 9中父组件调用子组件方法的功能。
#### 引用[.reference_title]
- *1* [Angular组件——父组件调用子组件方法](https://blog.csdn.net/weixin_33938733/article/details/86259262)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [angular-在父组件中调用子组件方法](https://blog.csdn.net/weixin_44726310/article/details/103361153)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [angular4中父组件如何调用子组件的方法](https://blog.csdn.net/u012396955/article/details/78852140)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]