将样式添加到角度组件选择器标签

【问题标题】：add style to angular component selector tag将样式添加到角度组件选择器标签
【发布时间】：2020-08-28 13:23:00
【问题描述】：

我正在尝试为可重复使用的bootstrap-cards 制作角度组件，如下所示

<app-card class="someClass" style="width: 20rem"=>
  <p>some content here for the ng-content</p>
</app-card>

我是否可以直接在组件标签上添加 CSS 类和样式以进一步自定义？

【问题讨论】：

标签： css angular

【解决方案1】：

如果您希望一个用户提供一个自定义 css 类来自定义组件，那么您可以公开一个属性来获取用户提供的 className。为此，您可以使用 @Input() 装饰器。

假设用户在他/她的组件中有这个类：

.customClass{
   /* some style props */
}

并应用于组件：

<app-card class="customClass"></app-card>

您可以在组件中添加@Input 属性：

@Input() cssClass = class;

在您的模板中执行以下操作：

<div [class]="cssClass">
   <!-- children tags -->
</div>

【讨论】：