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 {}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Angular1.x自定义指令,结合实例形式分析了Angular1.x自定义指令的实现与使用方法,以及相关操作技巧与注意事项,需要的朋友可以参考下2017-03-03
angularjs利用directive实现移动端自定义软键盘的示例
下面小编就为大家带来一篇angularJS利用directive实现移动端自定义软键盘的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了详解AngularJS中的作用域,是AngularJS学习中的基础知识,需要的朋友可以参考下2015-06-06
Angular懒加载模块与Combined Injector原理全面解析
这篇文章主要为大家介绍了Angular懒加载模块与Combined Injector原理全面解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
我们在应用的页面或者组件需要加载数据时，浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小，甚至让人感觉不到区别；但也可能很长，这样会导致让我们的用户看到了没有被渲染过的页面。本文将介绍Angular.js中处理页面闪烁的方法。2017-03-03
网上已经有AngularJS比较多的相关教程了，那么这篇文章我们一起来看一个AngularJS双击排序的例子，对大家日常开发很有帮助的，有需要的可以参考借鉴。2016-08-08
这篇文章主要介绍了详解Angular Karma测试的持续集成实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
本篇文章主要介绍了angularjs实现下拉列表的选中事件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
详解如何在Angular应用中发起HTTP 302 redirect
这篇文章主要介绍了如何在Angular应用中发起HTTP 302 redirect详解，有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
Angular8引入百度Echarts进行图表分析的实现代码
这篇文章主要介绍了Angular8引入百度Echarts进行图表分析的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论