[英]Use Component class variable inside Component host
Do you know how can I make use of a class
variable inside the @Component
declaration? 您知道如何在@Component
声明中使用class
变量吗?
This is the desired approach: 这是理想的方法:
@Component({
selector: "whatever",
host: {
"[class]":"className"
}
})
export class MyComponent {
@Input() className:string="my-class-name";
}
Expected results: 预期成绩:
<whatever class="my-class-name"></whatever>
You may want to use the HostBinding decorator to set the desired CSS class back to the host element: 您可能要使用HostBinding装饰器将所需的CSS类设置回host元素:
@HostBinding('class.my-class-name')
protected get myClass() {
return true;
}
[Edit] [编辑]
The above example shows how to set a static CSS class to the host element. 上面的示例显示了如何为host元素设置静态CSS类。 To set a dynamic class, then you will need to decorate the className property with HostBinding
decorator: 要设置动态类,则需要用HostBinding
装饰器装饰className属性:
@HostBinding('class')
@Input()
public className:string = "my-class-name";
Plunker: https://plnkr.co/edit/iPbrYbUSZtkHiGLDyo2B?p=preview Plunker: https ://plnkr.co/edit/iPbrYbUSZtkHiGLDyo2B ? p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.