如何解决Angular组件拆分后父元素display:flex布局失效问题

问题根因 #

你将数字区域拆分到独立组件后，Angular 会为子组件自动生成一层 宿主元素节点，这层节点是你拆分前不存在的额外 DOM 层级：

• 拆分前：.parent 的直接子元素是「数字区域容器」和「输入框」，flex 布局直接作用于这两个同级节点，排版符合预期
• 拆分后：.parent 的直接子元素变成了「子组件宿主标签」和「输入框」，你之前只控制了子组件内部的样式，没有处理这层额外的宿主元素的布局属性，所以 flex 排版失效

解决方案 #

方案1：使用 display: contents 消去宿主层级影响（最推荐，侵入性最小） #

直接在数字区域子组件的样式文件中添加如下代码即可，这个属性会让宿主元素本身不参与布局渲染，相当于把它的内部子元素直接提升为 .parent 的直接子节点，排版效果和拆分前完全一致：

:host {
  display: contents;
}

方案2：直接为子组件宿主设置匹配原布局的样式 #

如果你不想用 display: contents，可以直接在父组件样式中给子组件宿主设置和原数字区域容器完全相同的样式即可，不需要用 ::ng-deep：

.parent app-number {
  /* 此处粘贴你原来写在数字区域容器上的所有布局样式，比如宽度、margin、padding等 */
}

验证说明 #

修改后打开浏览器开发者工具查看 DOM 结构，确认 .parent 的直接子节点的布局属性和拆分前的两个节点属性完全一致，就能得到和未拆分时完全相同的 flex 效果。

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