本篇文章主要介绍了Angular 5 给组件本身的标签添加样式class的方法,现在分享给大家,也给大家做个参考。

在Angular 5给组件本身的标签添加样式有两种方法:

方式一:使用@Component的host属性

@Component({ selector : 'myComponent', host : { '[style.color]' : "'red'", '[style.background-color]' : 'backgroundColor' } }) class MyComponent { backgroundColor: string; constructor() { this.backgroundColor = 'blue'; } }

在host配置里添加属性,等同于标签上绑定属性的用法一样。

设置style:

'[style.color]': "'red'":注意red值双引号里还有一个单引号。

'[style.background-color]':'backgroundColor':这里是引用了组件里的变量backgroudColor。

这种方式的好处是可以在样式上使用组件的变量。

设置class:

@Component({ selector : 'myComponent', host : { '[class.myclass]' : 'showMyClass' } }) class MyComponent { showMyClass = false; constructor() { } toggleMyClass() { this.showMyClass = !this.showMyClass; } }

方式二:在样式里使用:host选择器

@Component({ selector : 'myComponent', styles : [` :host { color: red; background-color: blue; } `] }) class MyComponent {}

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Ajax上传实现根据服务器端返回数据进行js处理的方法

双层ajax嵌套(可多层)用法实例