如何在角度组件上应用 display:flex？答案

【问题标题】：How can i apply display:flex on angular component?如何在角度组件上应用 display:flex？
【发布时间】：2021-07-29 17:58:47
【问题描述】：

我有以下 html 布局。

https://stackblitz.com/edit/angular-rfiey8?file=src%2Fapp%2Fapp.component.css

我需要在parent 类上拥有display:flex 和flex-wrap:wrap，因此输入将始终位于左侧数字旁边。

但是当我将数字 html 布局放在单独的组件中时

https://stackblitz.com/edit/angular-g53hgs?file=src%2Fapp%2Fapp.component.css

我设法通过:host ::ng-deep 选择器设置父组件的HTML 样式。

但是css类

.parent {
  display: flex;
  flex-wrap: wrap;
}

不像第一个示例中 HTML 不在组件本身中那样工作。

我被困了很长时间。我怎样才能使父类上的display:flex 与第一个示例一样？

【问题讨论】：

标签： css angular

【解决方案1】：

像这样将parent css 类移到组件标签上

<div>
   <app-numbers class="parent" [arr]="arr"></app-numbers>
   <input />
</div>

如果你已经有一个单独的组件 number 然后将 .number 样式移动到该组件的 css 文件中，无需使用 ng-deep 编写它

【讨论】：

我需要输入与数字组件内联。您建议的方式 - 输入在数字组件下。

【解决方案2】：

将 css 移动到数字组件中

https://stackblitz.com/edit/angular-jlkeea

number.component.css

:host {
  display: flex;
  flex-wrap: wrap;
}
.number {
  width: 20px;
  background-color: blue;
  border-radius: 20px;
  height: 20px;
  text-align: center;
  padding: 10px;
  margin: 5px;
}

app.componet.css

.parent {
  display: flex;
}
input {
  flex: 1;
}

这样你也不会破坏视图封装

【讨论】：

您提供的 stackblitz - 输入未与数字组件内联
我需要输入与数字组件内联，就像在第一个示例中一样
哦，必须调整示例大小才能看到它从父级中删除 flex-direction:column
在你的 stackblitz 中我找不到任何 - flex-direction:column css。你能编辑一下吗
我刚刚修复了它，所以你可能在我保存后检查过。