发布于 2年前

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 {}
©2020 edoou.com   京ICP备16001874号-3