Angular5给组件本身的标签添加样式class的方法
更新时间：2018年04月07日 15:14:27 作者：ngoing
本篇文章主要介绍了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 {}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
当你在输入框中键入文本时,这个文本会立即反映到 testString 属性上,反之亦然,如果你在组件类中改变 testString 的值,输入框的内容也会相应更新,这篇文章主要介绍了AngularJS 的生命周期和基础语法,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了浅谈Angular7 项目开发总结，本文在此做一次遇到问题的总结，以便知识的掌握，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
angular安装import echarts from‘echarts‘标红报错解决
这篇文章主要介绍了angular安装import echarts from‘echarts‘标红报错解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
本篇文章主要介绍了AngularJs ng-change事件/指令的小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了AngularJS实时获取并显示密码的方法,涉及AngularJS数据绑定及显示相关操作技巧,需要的朋友可以参考下2018-02-02
下面小编就为大家分享一篇angularjs数组判断是否含有某个元素的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了angular中两种表单的区别(响应式和模板驱动表单)，详细的介绍了这两种表单的实现以及区别，非常具有实用价值，需要的朋友可以参考下2018-12-12
这篇文章主要介绍了AngularJS的表单使用详解,在JS原有的基础上提供了更多与HTML交互的功能,需要的朋友可以参考下2015-06-06
这篇文章主要给大家介绍了关于angular共享依赖解决方案的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了Angular搜索场景中使用rxjs的操作符处理思路,主要的思路就是通过Subject来发送过滤条件，这样就可以使用rxjs的各种操作符，可以快捷很多。需要的朋友可以参考下2018-05-05
最新评论