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

版权声明:著作权归作者所有。

相关推荐

C#给文档注释添加换行

错误用法:使用<br />/// 第一行 /// <br /> /// 第二行 显示出来没有效果。正确做法:使用<para>/// <summary> /// <para>第一行</para> /// <para>第二行</par

html给文本输入框添加自定义的清除按钮

使用HTML 5,如果对清除按钮的样式不介意的话,可以使用search类型的输入框,它会提供一个默认的清除按钮<input type="search" placeholder="搜索" /> 如果想自定义清除按钮,则需要自己实现,这里使用jquery给出一个实现的方案:<!DOCTYPE h

Angular入口组件(entry component)和声明式组件的区别

Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。声明式组件是通过组件声明的selector加载入口组件(entry component)是通过组件的类型动态加载声明式组件声明式组件会在模板里通过组件声明的selector加载组件。示例@Component({   selector: 'a-cmp',   templat

Angular 5:HttpClient的基本用法

Angular 4.3引入了新的用于http请求的接口HttpClient。它旨在替换之前版本的接口Http。有以下新特性:对响应的body做类型检查默认返回的是JSON对象,不再需要使用json()显式解析返回的数据支持拦截器支持进度事件请求后验证和基于刷新的测试框架安装HttpClientModuleHttpClient属于@angular/common/http包的模块HttpCl

[译]Angular 5:升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布,它带来了一些新功能以及一些内部变化,这些会让Angular应用变得更小,执行变得更快。 在这篇文章中,我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息,请参阅公告博客帖子,有关所有更改的详细信息,请参阅官方更新日志。性能这是Angular 5包含的一些改变,它会让你的应用变得更