Angular父组件如何调用对应子组件实例的onSave方法并传入表单对象

我有一个父组件，内部包含三个子组件实例，相关代码如下：

child-product-detail.component.html

<form id="frmProduct" #frmProduct="ngForm" (ngSubmit)="onSave(frmProduct)">
   <ng-content select="[buttons-view]"></ng-content>
   <input type="text" id="txtProductName" name="txtProductName" [(ngModel)]="product.productName" />
</form>

child-product-detail.component.ts

onSave(form) {
    let isValid = this.validate(form);
    if (!isValid) return;
}

parent-product.component.html（注：原代码文件名拼写为parent-product.compoment.html，存在拼写错误）

<child-product-detail [product]="products[0]">
   <div buttons-view>
       <button type="button" class="btn" (click)="saveProduct(0)" >Save</button>                                    
   </div>
</child-product-detail>
<child-product-detail [product]="products[1]">
   <div buttons-view>
       <button type="button" class="btn" (click)="saveProduct(1)" >Save</button>                                    
   </div>
</child-product-detail>
<child-product-detail [product]="products[2]">
   <div buttons-view>
       <button type="button" class="btn" (click)="saveProduct(2)" >Save</button>                                    
   </div>
</child-product-detail>

parent-product.component.ts

saveProduct(productId) {
    let productToSave = this.products(productIndex);
    // Code required to call onSave method of child component
}

需求：实现父组件调用对应子组件的onSave方法，同时传入该子组件自身的表单对象。

你现在的结构中，保存按钮是通过ng-content投影到子组件中的，按钮的点击事件作用域属于父组件，默认无法直接访问子组件内部的表单模板变量，有两种低改动的实现方式可以选：

方案1：模板变量直接绑定子组件（适合子组件数量固定的场景） #

这是改动最小的方案，不需要额外写查询逻辑，直接在父组件模板中给每个子组件加模板引用变量，点击按钮时直接调用对应子组件的方法即可。

1. 先调整子组件代码，让子组件自己持有内部表单实例，不需要父组件额外传参：

// child-product-detail.component.ts 新增导入
import { ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

export class ChildProductDetailComponent {
  // 绑定模板中的#frmProduct表单实例
  @ViewChild('frmProduct') productForm!: NgForm;

  // 调整onSave兼容原有参数逻辑，无传参时默认用内部持有的表单
  onSave(form?: NgForm) {
    const targetForm = form || this.productForm;
    const isValid = this.validate(targetForm);
    if (!isValid) return;
    // 后续保存逻辑
  }

  // 保留原有的validate等其他方法
}

2. 修改父组件模板，给每个子组件加模板变量，直接绑定点击事件到子组件方法：

<child-product-detail #child0 [product]="products[0]">
   <div buttons-view>
       <button type="button" class="btn" (click)="child0.onSave()">Save</button>                                    
   </div>
</child-product-detail>
<child-product-detail #child1 [product]="products[1]">
   <div buttons-view>
       <button type="button" class="btn" (click)="child1.onSave()">Save</button>                                    
   </div>
</child-product-detail>
<child-product-detail #child2 [product]="products[2]">
   <div buttons-view>
       <button type="button" class="btn" (click)="child2.onSave()">Save</button>                                    
   </div>
</child-product-detail>

改完后父组件中原来的saveProduct方法可以直接删除，点击按钮会直接触发对应子组件的保存逻辑，子组件自己就能拿到内部表单，不需要父组件传值。

方案2：@ViewChildren查询子组件实例（适合子组件动态渲染的场景） #

如果后续你的子组件是通过*ngFor动态生成（比如products数组长度可变），用这个方案更灵活：

1. 第一步和方案1相同，先在子组件中通过@ViewChild持有自身的表单实例，调整onSave方法兼容逻辑。
2. 在父组件ts中导入相关装饰器和子组件类，查询所有子组件实例：

// parent-product.component.ts 新增导入
import { ViewChildren, QueryList } from '@angular/core';
import { ChildProductDetailComponent } from './child-product-detail.component'; // 替换为你的实际组件路径

export class ParentProductComponent {
  products = []; // 保留你原有的products属性
  // 查询所有子组件实例
  @ViewChildren(ChildProductDetailComponent) childDetailList!: QueryList<ChildProductDetailComponent>;

  saveProduct(productIndex: number) {
    // 原代码这里用()取数组元素是语法错误，数组索引用[]
    const productToSave = this.products[productIndex];
    // 按索引获取对应子组件实例
    const targetChild = this.childDetailList.get(productIndex);
    if (targetChild) {
      // 调用子组件onSave，子组件内部自带表单实例，无需父组件传
      targetChild.onSave();
      // 如果你一定要从父组件传表单，写法为 targetChild.onSave(targetChild.productForm)
    }
  }
}

父组件模板不需要改动，保持原来的(click)="saveProduct(x)"写法即可。

• 原代码中父组件文件名拼写错误：parent-product.compoment.html正确拼写应为parent-product.component.html，否则Angular编译会找不到文件
• 原父组件ts中this.products(productIndex)属于语法错误，数组按索引取值需要用方括号this.products[productIndex]
• 不要用事件冒泡、全局服务这类过重的方案实现这个需求，上面两种方案是Angular框架提供的正规组件通信方式，性能和可维护性都更好

内容的提问来源于stack exchange，提问作者developer