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 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
前台js调用后台方法示例
Dec 02 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
jQuery代码优化之基本事件
2011/11/01 Javascript
javascript 常用功能总结
2012/03/18 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
json 带斜杠时如何解析的实现
2019/08/12 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
对python中dict和json的区别详解
2018/12/18 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Python实现数值积分方式
2019/11/20 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
python scatter函数用法实例详解
2020/02/11 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Python如何实现邮件功能
2020/05/27 Python
pandas分批读取大数据集教程
2020/06/06 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
高级Java程序员面试题
2016/06/23 面试题
工程监理应届生求职信
2013/11/09 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
项目经理任命书
2014/06/04 职场文书
销售员岗位职责
2014/06/09 职场文书
2014年客户经理工作总结
2014/11/20 职场文书