Angular 组件样式约定

如何解决Angular 组件样式约定

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

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

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

card{
    width: 200px;
}

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

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

解决方法

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

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

在卡片组件 ts 中，您将拥有一个带有 @Input 装饰器的 width 属性：

@Input() width: number;

在父组件中，您可以根据索引传递特定的宽度。例如，在这个脚本中，我传递每个组件的宽度乘以当前卡片索引。

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

我应该做这样的事情吗？

是的，为什么不呢？为了灵活，可能使用 % 值作为宽度，如果您想确保对屏幕宽度的适应性，您也可能希望在 parent.component.css 中使用 flexbox。

有其他选择吗？

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

执行此类操作的推荐方法是什么？我是否应该直接设置标签样式？

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