angular 父组件调用子组件中的方法

在Angular中，父组件可以通过ViewChild装饰器获取子组件的实例，从而调用子组件中的方法。具体步骤如下：
1. 在子组件中定义需要被调用的方法。
2. 在父组件中使用ViewChild装饰器获取子组件的实例。
3. 在父组件中定义一个方法，通过子组件实例调用子组件中的方法。

下面是一个示例代码：

子组件child.component.ts中定义方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent {
  // 子组件的方法
  alert(d: any) {
    alert(d);
  }
}

父组件app.component.ts中获取子组件实例并调用子组件方法：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @ViewChild('child') child: ChildComponent | undefined;//获取子组件对象

  childAlert(text: any) {
    this.child?.alert(text);//父组件调用子组件的方法
  }
}

父组件app.component.html中调用父组件方法：

<app-child #child></app-child>
<button (click)="childAlert('调用子组件的方法')">调用子组件的方法</button>