Angular嵌套thead组件内th的colspan属性不生效如何解决？

问题根因 #

HTML的元素对内部DOM结构有严格的语义规范，仅允许直接嵌套、、等原生表格专属元素。你将表头逻辑封装到独立的table-header子组件后，Angular渲染时会默认保留该组件的自定义宿主标签，相当于在

<!-- 父组件的table模板 -->
<table>
  <thead appTableHeader></thead>
  <tbody>
    <!-- 其余表格内容 -->
  </tbody>
</table>

方案2：使用ng-container承载组件（无需修改组件原有选择器） #

如果不想改动已有子组件的选择器配置，可以通过ng-container配合结构指令消除额外宿主标签：

<table>
  <ng-container *ngComponentOutlet="TableHeaderComponent"></ng-container>
  <tbody>
    <!-- 其余表格内容 -->
  </tbody>
</table>

注意使用该方案需要先在父组件中导入TableHeaderComponent，并将组件类暴露给模板。

两种方案都可以避免在表格结构中插入非标准自定义标签，修复后colspan属性即可正常生效。

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

// table-header.component.ts
@Component({
  // 原selector: 'app-table-header' 改为如下属性选择器
  selector: '[appTableHeader]',
  template: `
    <th class="tableHeader" colspan="12">my table header</th>
  `,
  // 其余配置保持不变
})
export class TableHeaderComponent {}