Angular v11表格行迁移至子组件后Bootstrap布局错乱如何修复

布局错乱是Angular组件的默认宿主元素破坏了HTML表格的原生结构规则导致的。HTML中<table>的<tbody>节点下只允许直接放置<tr>节点，你把<tr>抽成独立子组件后，子组件默认会生成一层自定义标签嵌套在<tbody>和<tr>之间，打破了表格的渲染规则，最终出现布局错位。

方案1：修改子组件为属性选择器（更推荐） #

• 第一步：修改子组件的@Component装饰器中的selector配置，从元素选择器改为属性选择器，同时定义输入属性接收商品数据：

// 子组件ts文件
@Component({
  // 原来的写法：selector: 'app-product-row',
  selector: '[appProductRow]', // 修改为属性选择器
  templateUrl: './product-row.component.html',
  styleUrls: ['./product-row.component.css']
})
export class ProductRowComponent {
  @Input() product_item: any;
}

• 第二步：子组件的模板文件只保留<tr>及其内部内容，不需要额外外层标签：

<!-- 子组件html文件 -->
<tr>
  <td><span>{{product_item.productID}}</span></td>
  <td><span>{{product_item.productName}}</span></td>
  <td><span>{{product_item.fkSupplier.companyName}}</span></td>
  <td><span>{{product_item.fkCategory.categoryName}}</span></td>
  <td><span>{{product_item.quantityPerUnit}}</span></td>
</tr>

• 第三步：修改主组件中的调用方式，直接在<tr>标签上绑定子组件属性：

<!-- 主组件html的tbody部分 -->
<tbody>
  <tr appProductRow *ngFor="let product_item of input_productListData" [product_item]="product_item"></tr>
</tbody>

该方案完全符合HTML表格的语法规范，没有冗余标签，兼容性最好。

方案2：设置子组件宿主元素样式为display: contents #

如果不想修改子组件的选择器，可以直接在子组件样式中添加配置，让宿主元素不参与盒模型渲染：

/* 子组件css文件 */
:host {
  display: contents;
}

该方案改造成本最低，但display: contents在IE11等非常老旧的浏览器中不支持，对兼容性要求高的场景不建议使用。

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