Angular5给组件本身的标签添加样式class的方法
在Angular5给组件本身的标签添加样式有两种方法:
方式一:使用@Component的host属性
@Component({ selector:'myComponent', host:{ '[style.color]':"'red'", '[style.background-color]':'backgroundColor' } }) classMyComponent{ 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' } }) classMyComponent{ showMyClass=false; constructor(){ } toggleMyClass(){ this.showMyClass=!this.showMyClass; } }
方式二:在样式里使用:host选择器
@Component({ selector:'myComponent', styles:[` :host{ color:red; background-color:blue; } `] }) classMyComponent{}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。