Angular2コンポーネントのCSSでホスト要素を参照するにはどうすればよいですか？

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はCSSように、これらの_ng属性を追加特定のコンポーネントを参照します。

しかし、コンポーネント内で定義されたCSSからホスト要素を参照するにはどうすればよいですか？

Answer 1

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

または

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

ザ・は_ng...クラスはDOMが何の影に似スコープのスタイル（デフォルトencapsulation: ViewEncapsulation.Emulated）をエミュレートするために加えます。