如何在Angular2组件的CSS中引用host元素？

Question

我在Angular2中有一个组件，我想在主机元素上设置填充。

@Component({
    selector: 'my-app',
    template: 'Hello world'
    styles: ['my-app {padding: 10px}']
})

在浏览器中，我的风格如下：

my-app[_ngcontent-icu-3] {padding: 10px;}

虽然我的主机元素如下所示：

<my-app _ngcontent-icu-1="" _nghost-icu-3="">
    <div class="content" _ngcontent-icu-3=""></div>
</my-app>

据我了解，Angular2添加了这些_ng属性，因此CSS引用了特定的组件。

但是如何从组件内部定义的CSS引用host元素？

Answer 1

styles: [':host {padding: 10px}']

或

@Component({
    selector: 'my-app',
    template: 'Hello world'
    host: {'[style.padding.px]': '"10"'}
})

添加的_ng...类用于模拟范围样式（默认encapsulation: ViewEncapsulation.Emulated），类似于影子DOM所做的。