Question

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

这是理想的方法：

@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类设置回主机元素：

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

[编辑]

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

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

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

在Component主机中使用Component类变量

1 个答案: