Angular5给组件本身的标签添加样式class的方法


Posted in Javascript onApril 07, 2018

在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:

  1. '[style.color]': "'red'":注意red值双引号里还有一个单引号。
  2. '[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 {}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的继承实例代码
Apr 27 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 #Javascript
Javascript实现运算符重载详解
Apr 07 #Javascript
Vue中使用Sortable的示例代码
Apr 07 #Javascript
JavaScript实现简单动态进度条效果
Apr 06 #Javascript
js+css实现打字效果
Jun 24 #Javascript
简单介绍react redux的中间件的使用
Apr 06 #Javascript
webpack源码之loader机制详解
Apr 06 #Javascript
You might like
第四节--构造函数和析构函数
2006/11/16 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
php把数组值转换成键的方法
2015/07/13 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
python+pandas分析nginx日志的实例
2018/04/28 Python
学习python的前途 python挣钱
2019/02/27 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
Keras实现DenseNet结构操作
2020/07/06 Python
电钳专业个人求职信
2014/01/04 职场文书
法定代表人授权委托书
2014/04/04 职场文书
教师考核评语
2014/04/28 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
销售代理协议书
2014/09/30 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
Pandas 稀疏数据结构的实现
2021/07/25 Python