Angular 组件样式约定

Question

假设我必须创建以下布局：-

我可以在 card.component.css 中写出所有 <card> 特定样式。但正如您在图像中看到的那样，每个 <card> 都有特定的宽度。如何以及在何处设置此样式？

我应该在 parent.component.css 中做这样的事情吗？

card{
    width: 200px;
}

还有其他选择吗？是否存在在 card.component.css 本身中设置组件样式的方法？做这样的事情推荐的方法是什么？我是否应该直接设置 <card> 标签的样式？

我知道这是一个基于意见的问题，但是清晰明确的约定和心智模型可以对像我这样的初学者有很大帮助。

Answer 1

您可以将特定宽度从父级传递给卡片组件，并在卡片组件内部使用 ng 样式绑定。所以，在你的卡片组件中。 html 看起来像这样：

<div [style.width.px]="width">some texts </div>

并且在卡片组件 ts 中，您将使用 @Input 装饰器获得宽度属性：

@Input() width: number;

在Parent组件中，可以根据index传递具体的width。例如，在此脚本中，我将每个组件的宽度乘以当前卡片索引。

<card *ngFor="let c of cards; let i = index" width="index * 200"></card>

Answer 2

我应该这样做吗？

是的，为什么不呢？也许使用 % 值作为宽度以便灵活，如果你想确保适应屏幕宽度，你也可能想在你的 parent.component.css 中使用 flexbox。

有其他选择吗？

是的，您可以像其他答案解释的那样使用 Imports 的替代方法。或者在卡片组件的样式 URL 中定义不同的样式 URL 参见此处 Angular CSS Component Styles。而且可能还有更多选择。

做这样的事情推荐的方法是什么？我是否应该直接为标签添加样式？

组件背后的想法当然是样式 class 应该为所有元素设置相同的样式。根据您的图片，我认为卡片标签的样式是相同的，因此应该使用 parent.component.css 来设置这些元素的样式。关于第二部分，您可能想阅读有关 ngClass 我会使用 div 容器而不是直接样式元素，因为我遇到了直接样式元素的行为不当。

Angular 组件样式约定

Angular component styling convention

css

angular

conventions