我如何应用display:flex上的角组件?

Question

我有以下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在父类是相等的，就像在第一个例子?

Answer 1

将parentcss类移动到组件标签上，像这样

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

如果你已经有了一个单独的number组件，那么将.number样式移动到该组件的css文件中，不需要使用ng-deep

编写它

Answer 2

移动css到number组件

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;
}

这样就不会破坏视图封装