angular组件当前组件host动态添加样式

angular项目中，我们都知道可以用 

[class.className]="variable" 

或者 

[style.styleName]="styleValue" 

这2种方法给组件中的元素添加动态样式。

但是如果给当前组件的标签添加动态样式呢，如下比如要给添加动态样式。

import { Component } from '@angular/core';

@Component({

    selector： ‘app-about’，

    styleUrls: ['./about.component.scss'],

    templateUrl: './about.component.html'

})

export class AboutComponent {

    open = false;

}

这就需要用到host或者hostBinding,有下面3中方法：

参考：

http://angular.cn/api/core/HostBinding

https://zhuanlan.zhihu.com/p/347464587

angular 控件css_Angular5给组件本身的标签添加样式class的方法

https://stackoverflow.com/questions/35168683/hostbinding-with-a-variable-class-in-angular

1.使用@component的host属性， 注意属性的值默认为变量，如果直接使用属性值，需要加字符串单引号或者双引号，变量直接在组件里定义即可

@Component({

    selector： ‘app-about’，

    host: {

            '[style.color]' : "'red'",

            '[style.background]' : "bgColor"

            '[class.myClass]' : "showMyClass"

    }

    styles： [` 

        .myClass {

                    color: orange;

            }

    `]

})

Class AboutComponent {

        bgColor = "yellow";

        showMyClass = true;

}

2 使用host样式，这样能加样式，但是就是加不了动态样式，但是注意最后tips，还会有用的。

@Component({

    selector： ‘app-about’，

    styles： [` 

        ：host {

                color: orange;

            }

    `]

})

3.使用hostBinding给当前组件绑定class，然后在style里定义class即可

Class AboutComponent {

        @HostBinding('class.className')  get  className () {return showMyClass};

}

Tips：

如果在styles里定义的class加到DOM了，但是样式不起作用，不妨加:host试试，也就是定义的class从host开始找。因为我加了也遇到了class有了但是样式不起作用的问题。

参考的这个文章https://zhuanlan.zhihu.com/p/347464587

比如：

:host.myClassName