Angular - 将类应用于组件根元素而不是选择器答案

【问题标题】：Angular - Apply class to component root element not selectorAngular - 将类应用于组件根元素而不是选择器
【发布时间】：2017-05-15 15:35:19
【问题描述】：

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

<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>

是否有将选择器中的类应用到组件模板的根元素？

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

【问题讨论】：

基于属性的选择器会起作用吗？ selector: '[tn-labelfor]',用法<label tn-labelfor 改东西this.renderer.setElementAttribute(this.elementRef.nativeElement,'class','my class');
angular.io/docs/ts/latest/guide/attribute-directives.html

【解决方案1】：

您总是可以将类作为字符串传递：

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

然后在下部组件中：

@Input() myClass: string;

还有 HTML：

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

【讨论】：