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