Angular5给组件本身的标签添加样式class的方法
时间：2021-05-26 08:13:08|栏目：AngularJS|点击： 次
在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 {}
上一篇：AngularJs ng-repeat 嵌套如何获取外层$index
栏 目：AngularJS
本文标题：Angular5给组件本身的标签添加样式class的方法
本文地址：http://www.codeinn.net/misctech/129007.html
