Angular5给组件本身的标签添加样式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：

  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 {}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular 4中如何显示内容的CSS样式示例代码

    前言 在开始本文的正文之前,我们先来看一下angular2中将带标签的文本输出在页面上的相关内容,为了系统性的防范XSS问题,Angular默认把所有值都当做不可信任的. 当值从模板中以属性(Property).DOM元素属性(Attribte).CSS类绑定或插值表达式等途径插入到DOM中的时候, Angular将对这些值进行无害化处理(Sanitize),对不可信的值进行编码. h3>Binding innerHTML</h3> <p>Bound value:</p

  • AngularJS动态添加数据并删除的实例

    如下所示: <!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>TodoList</title> <style> body { padding: 0; margin: 0; } .todo { width: 300px; margin: 100px a

  • AngularJS使用ng-class动态增减class样式的方法示例

    本文实例讲述了AngularJS使用ng-class动态增减class样式的方法.分享给大家供大家参考,具体如下: 使用ng-class可以实现动态地增减样式: <!DOCTYPE html> <html ng-app="formExample"> <head> <meta charset="UTF-8"> <title></title> <script src="../js/a

  • angularJS实现动态添加,删除div方法

    要实现的功能类似下图,动态添加或者删除div 点击 增加可添加一条div 点击删除可删除一条div HTML代码如下:(省略CSS样式代码了大笑) <div class="accordion-inner"> <div class="alert alert-info fade in" ng-repeat="permission in permissions">授权给: <select id="" c

  • 详解AngularJS ng-class样式切换

    详解AngularJS ng-class样式切换

    整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g

  • AngularJs定制样式插入到ueditor中的问题小结

    AngularJs定制样式插入到ueditor中的问题小结

    总结一下自己给编辑器定制样式的过程中所遇到的问题,主要是编辑器的二次开发接口,以及用angular定制样式,问题不少,终于在**的帮助下,完成了,还剩下老版本和新版本的交互没有弄好,不过不难.下面分别讲解问题. ueditor的开发 你可以在官网上下载任意版本,进行使用即可:http://ueditor.baidu.com/website/download.html 下载后按照官网上的配置就可以使用.文档地址:http://fex.baidu.com/ueditor/ 关于ueditor二次开发

  • AngularJS表格样式简单设置方法示例

    AngularJS表格样式简单设置方法示例

    本文实例讲述了AngularJS表格样式简单设置方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格table,利用样式设置表格间隔色 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格设置样式</title> <link rel="stylesheet" h

  • AngularJS实现动态切换样式的方法分析

    AngularJS实现动态切换样式的方法分析

    本文实例讲述了AngularJS实现动态切换样式的方法.分享给大家供大家参考,具体如下: AngularJS相比原生的js或者jquery有着很大不同,对于一个简单的鼠标点击不同选项,动态切换样式该怎么实现呢. 本文实现的是点击某个标题,标题字体加粗,并随之切换相应的div内容,如下(点击推荐或热点) Ok.,实现过程 1. html代码 <!--推荐或热点标题--> <div class="comTitStyle"> <div> <a ng-

  • Angular使用动态加载组件方法实现Dialog的示例

    网上的文章和教程基本上写到组件加载完成就没了!没了?!而且都是只能存在一个dialog,想要打开另一个dialog必须先销毁当前打开的dialog,之后看过 material 的实现方式,怪自己太蠢看不懂源码,就只能用自己的方式来实现一个dialog组件了 Dialog组件的目标:可以同时存在多个Dialog,可销毁指定Dialog,销毁后html中无组件残留且提供回调 动态加载组件的实现方式有两种,angular4.0版本之前使用ComponentFactoryResolver来实现,4.0之

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

    在Angular 5给组件本身的标签添加样式有两种方法: 方式一:使用@Component的host属性 @Component({ selector : 'myComponent', host : { '[style.color]' : "'red'", '[style.background-color]' : 'backgroundColor' } }) class MyComponent { backgroundColor: string; constructor() { this

  • JQuery为元素添加样式的实现方法

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").css("css属性名","属性值") 如  $("span").css("color","red") 将标签为span的字体都设为红色的 $("#id")  $("span"

  • 为EasyUI的Tab标签添加右键菜单的方法

    前期的准备工作: 1.下载DEMO源码,并升级为最新版本(jquery 1.7.2,Easyui 1.2.6),直接替换就可以啦,升级easyui 是的要把css js theme 全部替换 2.在首页的HTML代码中:将 复制代码 代码如下: <div id="mm" class="easyui-menu" style="width:150px;"> <div id="mm-tabupdate">刷新

  • django为Form生成的label标签添加class方式

    使用Form生成html标签的时候,虽然提供了widget的方法可以自定义标签的要是,但是只能给生成的input标签添加样式,对于生成的label标签无法添加样式. 而很多场景下需要为label和input都添加class以实现自定义样式. 测试环境 创建一个Form,通过Form帮我们生成HTML: # urls.py 文件,对应关系 path('email/', views.email), # forms.py 文件 from django.forms import Form from dj

  • Vue2.0 给Tab标签页和页面切换过渡添加样式的方法

    使用vue-router构建单页应用时,如何给当前页面的标签页添加样式呢? 1.在app.vue文件中你的nav中添加路由地址 2.依然在app.vue文件中,添加样式 不用在任何位置加class,只要在css中写上这个名称,样式自己随意改. 如何在单页切换的时候添加过渡? 1.在app.vue文件中,将router-view包裹在transition中,transition加个name. 2.在app.vue中添加css样式(你的transition的name是什么,第一个单词就是什么) 以上

  • vue 组件中添加样式不生效的解决方法

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v-33f8ed40></div> <template> //我用js在上面div标签中插入一个<p class='text'>text goes here</p> <script> export default { ... mounted(){

  • 给Ajax返回的HTML标签动态添加样式的方法

    今天在做项目时,在页面中用ajax返回了另一个页面,突然发现返回页面中的表格把页面给顶了出去,经过一番研究,终于解决了. 先准备好要返回内容的容器 <div class="container"> </div> 预定义一个样式,以便返回的内容能直接套用 比如,我们希望返回的表格不会太过分,把页面给顶开了... <style> .container table{ width:100%; } </style> 最后直接在容器中用ajax返回内容

  • js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td>  <a e_value="g_sn" ename="商品编码" c

  • angular4模块中给标签添加背景图的实现方法

    一.现象 一个全屏的"走马灯"每项需要添加背景图,在循环标签里需要动态添加行内样式 二.解决 1.首先有一个图片数组,如: export class AppComponent { array = ["url(/assets/images/img1.png)","url(/assets/images/img2.png)"]; } 2.模块中添加数据,如: <div nz-carousel-content *ngFor="let it

  • 再谈javascript 动态添加样式规则 W3C校检

    毫无疑问,基于表现与结构相分离的原则,直接导入一个新的样式表是最好的选择,但有些情况就行不通,如我们做一个能拖动的DIV,从设置样式的角度看,就是把它绝对定位,以防影响原来的文档流,然后一点点改变其top与left的值实现移动的效果.由于拖动是有时间概念的,一秒24帧,样式表不可能面面俱到都把它们写进去.因此动态生成样式规则与快速修改样式规则是非常有必要的,W3C为此做了大量的工作,在DOM2.0中,扩充了不少接口. 退一步说,表现与结构相分离也不止导入样式表这一条路.要知道,一共有三种样式类型

随机推荐