如何创建无包裹标签的Angular通用表格列组件并传递输入？

这个问题我之前也碰到过！Angular组件默认会生成自己的宿主标签，确实会破坏表格的结构（毕竟表格里只能有<tr>、<td>这些标准元素）。给你几个靠谱的解决方案，按需选就行：

方案1：用ng-container + 模板引用（最通用，兼容所有Angular版本） #

首先创建一个通用列组件，把要渲染的<td>放在<ng-template>里，这样组件本身不会生成多余DOM：

import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-common-columns',
  template: `
    <ng-template #commonColsTpl let-rowData>
      <td>{{ rowData.col1 }}</td>
      <td>{{ rowData.col2 }}</td>
      <!-- 这里补上剩下13个通用列的渲染逻辑 -->
    </ng-template>
  `,
  // Angular 14+可以加standalone: true，不用在模块里声明
})
export class CommonColumnsComponent {
  @ViewChild('commonColsTpl') commonColsTpl!: TemplateRef<any>;
}

然后在父组件的表格里，通过ng-container和ngTemplateOutlet渲染通用列，完全不会产生多余标签：

<table>
  <tr *ngFor="let row of tableDataset">
    <!-- 渲染15个通用列 -->
    <ng-container 
      *ngTemplateOutlet="commonColsComponent.commonColsTpl; context: { $implicit: row }"
    ></ng-container>
    <!-- 当前表格的自定义列 -->
    <td>{{ row.customColA }}</td>
    <td>{{ row.customColB }}</td>
  </tr>
</table>

<!-- 引入通用列组件（它只会加载模板，不会渲染到DOM中） -->
<app-common-columns #commonColsComponent></app-common-columns>

方案2：用结构型指令（无额外组件标签，更轻量） #

如果不想引入额外的组件标签，可以写一个结构型指令，直接在<tr>上动态生成通用列：

import { Directive, Input, ElementRef } from '@angular/core';

@Directive({
  selector: '[appCommonColumns]'
})
export class CommonColumnsDirective {
  // 接收行数据，每次数据变化时生成<td>
  @Input() set appCommonColumns(rowData: any) {
    if (!rowData) return;
    
    const trElement = this.el.nativeElement;
    // 可以先清空旧的通用列（如果需要）
    // 然后逐个创建并添加<td>
    const col1 = document.createElement('td');
    col1.textContent = rowData.col1;
    trElement.appendChild(col1);

    const col2 = document.createElement('td');
    col2.textContent = rowData.col2;
    trElement.appendChild(col2);

    // 重复上述逻辑，创建剩下13个通用列
  }

  constructor(private el: ElementRef) {}
}

使用时直接在<tr>上绑定指令就行，DOM里只会有标准的表格元素：

<table>
  <tr *ngFor="let row of tableDataset" [appCommonColumns]="row">
    <!-- 自定义列会自动跟在通用列后面 -->
    <td>{{ row.customCol }}</td>
  </tr>
</table>

方案3：Angular 17+专属：模板组件（最简洁） #

如果你的项目用的是Angular 17及以上，可以直接创建一个模板型独立组件，完全不需要宿主元素：

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

@Component({
  selector: 'ng-template[appCommonColumns]',
  standalone: true,
  template: `
    <td>{{ $implicit.col1 }}</td>
    <td>{{ $implicit.col2 }}</td>
    <!-- 其余13个通用列 -->
  `
})
export class CommonColumnsComponent {}

使用时直接在<tr>里引用模板：

<table>
  <tr *ngFor="let row of tableDataset">
    <ng-template [appCommonColumns]="row"></ng-template>
    <!-- 自定义列 -->
    <td>{{ row.customCol }}</td>
  </tr>
</table>

为什么常规组件不行？ #

Angular组件的设计就是必须有一个宿主元素来挂载视图，所以直接用<my-common-columns>标签的话，这个标签必然会出现在DOM里，而表格不允许非标准元素嵌套，自然会出问题。上面的几种方法都是绕开了组件的宿主元素限制，直接渲染需要的<td>。

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