可以是Angular 2零部件样式本身

Question

在Angular 2中，您可以在组件的模板中包含样式表。由于Angular 2的视图封装，样式仅适用于包含的元素。

有没有一种方法可以在不放置周围的<div class="component-wrapper"></div>的情况下对组件的主标签进行样式设置？

示例plnkr：http://plnkr.co/edit/rANAsR1h9ERBIZV6wuJ8

它有一个外部css文件，为<app>标记添加边框和填充，模板尝试设置背景颜色。

Answer 1

您有两个选项

• 使用host属性

@Component({
    selector : 'my-component',
    host : {
        '[style.color]' : "'red'", 
        '[style.background-color]' : 'backgroundColor'
    }
})
class MyComponent {
    backgroundColor: string;
    constructor() {
        this.backgroundColor = 'blue';
    }
}

• 使用styles属性和:host

@Component({
    selector : 'my-component',
    styles : [`
        :host {
            color: red;
            background-color: blue;
        }
    `]
})
class MyComponent {}

注意使用:host和ViewEncapsulation.None时有一种奇怪的行为。

以下是一个plnkr，其中包含两种备选方案的简单示例。

Answer 2

最简单的方法！👇

在您的组件.css:中

:host {
    background-color: blue;
}