Angular 5：在表格中渲染无父模板的自定义组件内容

我完全懂你的困扰——HTML表格对内部元素的结构要求特别严格，这正是你遇到问题的核心原因。

问题根源 #

HTML规范明确规定，<table>的直接子元素只能是<thead>、<tbody>、<tfoot>、<caption>这类合法标签。当你把<app-custom-rows>直接放在<table>内部时，浏览器会识别到这是一个无效的表格子元素，会自动调整DOM结构：要么把<app-custom-rows>移出表格，要么把组件内部的<tr>也一并移出表格上下文，最终导致你的多行内容无法正确嵌入表格。

最优解决方案：使用属性型组件选择器 #

最直接且稳妥的修复方式是修改自定义组件，将其改为属性选择器，这样就不会生成额外的DOM标签破坏表格结构。

步骤1：修改组件的选择器

在CustomRowsComponent的装饰器里，把selector从元素选择器改成属性选择器：

@Component({
  selector: '[app-custom-rows]', // 用方括号包裹，转为属性选择器
  templateUrl: './custom-rows.component.html',
  styleUrls: ['./custom-rows.component.css']
})
export class CustomRowsComponent {
  @Input() customAttribute: any; // 保留你的输入属性
}

步骤2：调整表格模板的用法

把原来的元素式调用改成属性式，推荐绑定到<tbody>标签上（表格的行本来就应该放在<tbody>里，符合规范）：

<table>
  <thead>
    <th>你的表头内容...</th>
  </thead>
  <!-- 把*ngFor和组件属性都绑定在<tbody>上 -->
  <tbody app-custom-rows *ngFor="let t of yourDataList" [customAttribute]="somevalue"></tbody>
</table>

步骤3：保持组件内部的行结构不变

你的custom-rows.component.html依然可以保留多个<tr>，不需要做任何修改：

<tr>
  <td>{{ customAttribute.someField1 }}</td>
  <!-- 其他单元格内容 -->
</tr>
<tr>
  <td>{{ customAttribute.someField2 }}</td>
  <!-- 其他单元格内容 -->
</tr>
<!-- 更多<tr>行 -->

这样渲染后的DOM结构会完全符合表格规范：每个<tbody>里包含你组件定义的多行<tr>，不会有额外的自定义组件标签干扰。

备选方案：用CSS隐藏组件宿主标签（兼容性稍差） #

如果你暂时不想修改组件选择器，也可以给组件添加CSS样式，让浏览器忽略宿主元素：

app-custom-rows {
  display: contents;
}

不过这种方式存在兼容性问题（旧版浏览器不支持display: contents），所以还是优先推荐属性选择器的方案。

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