如何引用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。