如何引用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引用主机元素？

Answer 1

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

要么

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

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