如何从<table>中获取TransactionLineComponent类型的动态子组件列表？

如何查询TransactionGridComponent中内的TransactionLineComponent子组件？ #

在Angular场景下，要获取父组件里动态创建的子组件实例，最直接且可靠的方式是使用@ViewChildren装饰器——它能自动跟踪所有匹配类型的子组件，包括后续动态添加或删除的实例。结合这个工具，你可以轻松实现删除行后自动重新编号的逻辑，下面是具体的实现步骤：

1. 父组件中用@ViewChildren捕获子组件列表 #

首先在TransactionGridComponent中导入必要的Angular模块，然后通过@ViewChildren声明一个QueryList，用来存储所有TransactionLineComponent实例：

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { TransactionLineComponent } from './transaction-line.component';

@Component({
  selector: 'app-transaction-grid',
  templateUrl: './transaction-grid.component.html'
})
export class TransactionGridComponent implements AfterViewInit {
  // 存储所有交易行子组件的QueryList
  @ViewChildren(TransactionLineComponent) transactionLines!: QueryList<TransactionLineComponent>;
  // 用数组管理行数据（配合*ngFor渲染子组件）
  lineDataList: any[] = [];

  ngAfterViewInit(): void {
    // 页面初始化完成后先更新一次编号
    this.updateLineNumbers();
    
    // 监听子组件列表的变化（添加/删除行时自动触发）
    this.transactionLines.changes.subscribe(() => {
      this.updateLineNumbers();
    });
  }

  // 添加新行的方法
  addLine(): void {
    // 根据业务需求添加空的交易数据对象
    this.lineDataList.push({ amount: '', type: '' });
  }

  // 删除指定行的方法
  deleteLine(index: number): void {
    this.lineDataList.splice(index, 1);
    // 无需手动调用编号更新，changes订阅会自动触发
  }

  // 统一更新所有行的编号
  private updateLineNumbers(): void {
    this.transactionLines.forEach((lineComp, index) => {
      // 给每个子组件设置从1开始的编号
      lineComp.lineNumber = index + 1;
    });
  }
}

2. 模板中渲染子组件（*ngFor方式） #

如果是用*ngFor渲染子组件（这是最常用的动态渲染方案），父组件的模板可以这样写：

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>交易金额</th>
      <th>交易类型</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历行数据，渲染TransactionLineComponent -->
    <tr *ngFor="let data of lineDataList; let i = index">
      <app-transaction-line 
        [lineData]="data"
        [lineNumber]="i + 1" <!-- 也可直接通过模板传编号，用@ViewChildren更灵活 -->
        (delete)="deleteLine(i)"
      ></app-transaction-line>
    </tr>
  </tbody>
</table>

<button (click)="addLine()">添加行</button>

3. 手动创建组件的场景（不用*ngFor） #

如果你需要用ComponentFactoryResolver手动创建子组件（比如复杂的动态组件场景），需要先在模板中定义视图容器，再通过@ViewChild获取容器实例：

import { ComponentFactoryResolver, ViewContainerRef, ViewChild } from '@angular/core';

@Component({...})
export class TransactionGridComponent {
  @ViewChild('lineContainer', { read: ViewContainerRef }) lineContainer!: ViewContainerRef;
  @ViewChildren(TransactionLineComponent) transactionLines!: QueryList<TransactionLineComponent>;

  constructor(private cfr: ComponentFactoryResolver) {}

  addLine(): void {
    // 创建TransactionLineComponent的工厂实例
    const factory = this.cfr.resolveComponentFactory(TransactionLineComponent);
    // 在容器中创建组件实例
    const compRef = this.lineContainer.createComponent(factory);
    // 设置组件输入属性
    compRef.instance.lineData = { amount: '', type: '' };
    // 绑定删除事件
    compRef.instance.delete.subscribe(() => {
      compRef.destroy();
    });
  }

  // 同样在ngAfterViewInit中监听changes事件更新编号
}

对应的模板结构：

<table>
  <tbody #lineContainer></tbody>
</table>
<button (click)="addLine()">添加行</button>

关键提示 #

• QueryList是Angular提供的特殊集合，会自动跟踪视图中组件的增删变化
• 通过changes订阅，你可以在子组件列表变化时自动触发编号更新，无需手动调用
• 在TransactionLineComponent中只需定义一个输入属性lineNumber，就能在子组件模板中渲染编号

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