Angular

Question

我的应用程序中有一个卡片组件。根据卡片的类型，需要将不同的样式应用于模板的根元素。当我这样做时：

<card class="card-type-class"></card>

我的 html 最终看起来像这样：

<card class="card-type-class">
    <div class="other-constant-classes">
        content of my card
    </div>
</card>

而不是像这样：

<card>
    <div class="other-constant-classes card-type-class">
        content of my card
    </div>
</card>

是否可以将类从选择器应用到组件模板的根元素？

***抱歉，如果有人问过这个问题，我很难弄清楚如何搜索该问题...

Answer 1

您始终可以将 class 作为字符串传入：

<card [myClass]="'card-type-class'"></card>

然后在下面的组件中：

@Input() myClass: string;

和 HTML:

<div class="other-constant-classes {{myClass}}">
    content of my card
</div>

Angular - 将 class 应用到组件根元素而不是选择器