我可以在card.component.css 中写出所有<card> 特定的样式。但正如您在图像中看到的那样，每个<card> 都有一个特定的宽度。如何以及在何处设置此样式？
我应该在parent.component.css 中做这样的事情吗？
card{
width: 200px;
}
还有其他选择吗？是否存在一种方法来设置 card.component.css 本身的组件样式？做这样的事情的推荐方法是什么？我是否应该直接设置<card> 标签的样式？
我知道这是一个基于意见的问题，但清晰且定义明确的约定和心智模型可以帮助像我这样的初学者很多。
【问题讨论】：
标签： css angular conventions
是的，为什么不呢？也许使用 % 值作为宽度以便灵活，如果你想确保对屏幕宽度的适应性，你也可能想在你的 parent.component.css 中使用flexbox。
是的，您可以使用 Imports 的替代方法，就像解释的其他答案一样。或在卡片组件的 StyleURL 中定义不同的样式 URL，请参见此处Angular CSS Component Styles。而且可能还有更多选择。
组件背后的想法当然是样式类应该为所有元素设置相同的样式。从您的图片中，我假设卡片标签的样式是相同的，因此应该使用 parent.component.css 来设置这些元素的样式。关于第二部分，您可能想了解ngClass 我会使用 div 容器而不是直接样式元素，因为我遇到了直接样式元素的行为不端。
【讨论】：
display : inline-block。如果我在card 组件内使用div 容器包装器并将样式应用于它，则父<card> 标记仍将具有默认display : block。这可能会破坏我的布局。有什么建议吗？
display: inline-flex，请参阅文档here。我为可能的解决方案准备了一点stackblitz。
您可以将特定宽度从父组件传递给卡片组件，并且在卡片组件内部使用 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>
【讨论】：
<card style="width: 200px"></card>？这有效吗？
<card style="width: 200px"></card> 这样的组件的样式是否有效。