Angular封装ngFor到组件后flex失效 如何移除组件宿主标签

下面是两种可直接落地的处理方式，你可以根据实际场景选择： #

方案1：修改组件为属性选择器（彻底删除DOM中的宿主标签） #

这个方案可以完全移除DOM里多余的<comp-ngfor-testGrid>标签，不会留下任何额外节点：

1. 修改组件的selector配置，从元素选择器改为属性选择器：

// comp-ngfor-testGrid 组件的ts文件
@Component({
  // 原配置：selector: 'comp-ngfor-testGrid'
  selector: '[compNgforTestGrid]', // 改为属性选择器
  templateUrl: './comp-ngfor-testGrid.component.html',
  styleUrls: ['./comp-ngfor-testGrid.component.css']
})

2. 父组件调用时，把属性绑定到本身不生成DOM节点的ng-container上即可：

<div class="grid">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <!-- 直接用属性形式调用组件，不会生成额外标签 -->
  <ng-container compNgforTestGrid></ng-container>
</div>

方案2：添加display: contents样式（无需修改组件定义） #

如果你不想改动组件的原有选择器配置，可以用这个CSS属性实现布局层面的宿主标签隐藏：
在子组件的样式文件中添加如下配置即可：

/* comp-ngfor-testGrid 组件的css文件 */
:host {
  display: contents;
}

display: contents会让宿主元素不生成任何盒模型，它内部的子元素会直接进入父级的flex布局上下文，效果和直接删除宿主标签完全一致，所有现代浏览器都支持该属性。

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