Angular中如何在表格TD内动态创建CustomInputComponent

嘿，我来帮你搞定这个Angular动态组件嵌入<td>的问题！你之前的代码核心问题是：直接用原生DOM创建<td>后，没有把动态组件挂载到这个<td>对应的Angular视图容器里，而是用了全局的container，导致组件无法嵌入到目标<td>中。下面给你两种可行的方案，优先推荐第一种，更符合Angular的最佳实践～

方案一：用Angular模板+ViewChildren实现（推荐） #

这种方法完全遵循Angular的视图机制，不需要手动操作原生DOM，也能完美实现组件嵌入<td>的需求。

修改app.component.html #

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th scope="col" *ngFor="let column of columns">{{column}}</th>
      </tr>
    </thead>
    <tbody>
      <!-- 根据总元素数和列数计算行数，生成对应tr -->
      <tr *ngFor="let row of getRowList()">
        <!-- 为每一列生成td，并用ng-template标记组件容器 -->
        <td *ngFor="let col of getColumnList()">
          <ng-template #componentContainer></ng-template>
        </td>
      </tr>
    </tbody>
  </table>
</div>

修改app.component.ts #

import { Component, OnInit, ComponentFactoryResolver, ViewChildren, ViewContainerRef, QueryList } from '@angular/core';
import { CustomInputComponent } from './custom-input.component'; // 替换成你的组件实际路径

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  columns = ['列1', '列2', '列3']; // 替换成你的实际列数据
  totalComponentCount = 12; // 需要生成的组件总数

  // 获取所有td内的组件容器列表
  @ViewChildren('componentContainer') componentContainers!: QueryList<ViewContainerRef>;

  constructor(private resolver: ComponentFactoryResolver) { }

  ngOnInit() {
    // 视图未初始化，这里不做组件创建操作
  }

  ngAfterViewInit() {
    // 视图初始化完成后，遍历容器创建组件
    this.componentContainers.forEach((container, index) => {
      // 只创建到指定数量，避免多余td生成组件
      if (index < this.totalComponentCount) {
        const factory = this.resolver.resolveComponentFactory(CustomInputComponent);
        container.createComponent(factory);
      }
    });
  }

  // 计算需要生成的行数
  getRowList() {
    return Array(Math.ceil(this.totalComponentCount / this.columns.length)).fill(0);
  }

  // 生成列索引列表
  getColumnList() {
    return Array(this.columns.length).fill(0).map((_, idx) => idx);
  }
}

方案说明 #

• 用*ngFor自动生成<tr>和<td>，避免手动操作原生DOM
• 通过@ViewChildren获取所有<td>内的ng-template对应的ViewContainerRef（Angular的视图容器）
• 在ngAfterViewInit生命周期钩子中创建组件，此时视图已经完全初始化，容器都已存在

方案二：原生DOM创建元素后手动绑定ViewContainerRef（适配你的原有思路） #

如果你坚持要用原生DOM创建<tr>和<td>，可以通过手动将<td>转换为Angular的视图容器来实现组件嵌入，但这种方法相对hack，不推荐在生产环境使用。

修改app.component.ts #

import { Component, OnInit, ComponentFactoryResolver, Injector, ElementRef } from '@angular/core';
import { CustomInputComponent } from './custom-input.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  columns = ['列1', '列2', '列3'];

  constructor(
    private resolver: ComponentFactoryResolver,
    private injector: Injector,
    private elementRef: ElementRef
  ) { }

  ngOnInit() {
    const tableItem = this.elementRef.nativeElement.querySelector('#focusItem');
    let lastTR: HTMLTableRowElement | null = null;

    for (let i = 0; i < 12; i++) {
      // 每列数换行，创建新的tr
      if (i % this.columns.length === 0) {
        const tr = document.createElement('tr');
        tableItem.appendChild(tr);
        lastTR = tr;
      }

      if (lastTR) {
        const td = document.createElement('td');
        lastTR.appendChild(td);

        // 将原生td转换为Angular视图容器
        const viewContainerRef = this.createViewContainerForElement(td);
        // 创建组件并挂载到容器中
        const factory = this.resolver.resolveComponentFactory(CustomInputComponent);
        viewContainerRef.createComponent(factory, undefined, this.injector);
      }
    }
  }

  // 手动为原生元素创建ViewContainerRef
  private createViewContainerForElement(element: HTMLElement): ViewContainerRef {
    // 通过临时创建组件获取ViewContainerRef
    const tempFactory = this.resolver.resolveComponentFactory(CustomInputComponent);
    const tempComponentRef = tempFactory.create(this.injector, [], element);
    const viewContainerRef = tempComponentRef.injector.get(ViewContainerRef);
    // 销毁临时组件，只保留视图容器
    tempComponentRef.destroy();
    return viewContainerRef;
  }
}

方案说明 #

• 先通过原生DOM创建<tr>和<td>
• 调用自定义方法createViewContainerForElement，通过临时创建组件的方式，获取绑定到<td>的ViewContainerRef
• 最后用这个容器创建目标组件，实现嵌入<td>的效果

注意事项 #

1. 确保CustomInputComponent已经在你的模块的declarations数组中声明
2. 如果是Angular 8及以下版本，还需要将CustomInputComponent添加到模块的entryComponents数组中（Angular 9+启用Ivy后无需此操作）

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