在组件主机中使用Component类变量

Question

您知道如何在@Component声明中使用class变量吗？

这是理想的方法：

@Component({
    selector: "whatever",
    host: {
        "[class]":"className"
    }
})
export class MyComponent {
    @Input() className:string="my-class-name";
}

预期成绩：

<whatever class="my-class-name"></whatever>

Answer 1

您可能要使用HostBinding装饰器将所需的CSS类设置回host元素：

@HostBinding('class.my-class-name')
protected get myClass() { 
    return true; 
}

[编辑]

上面的示例显示了如何为host元素设置静态CSS类。 要设置动态类，则需要用HostBinding装饰器装饰className属性：

@HostBinding('class')
@Input()
public className:string = "my-class-name";

Plunker： https ：//plnkr.co/edit/iPbrYbUSZtkHiGLDyo2B ？ p = preview