角2：如何样式组件的host元素？ [英] Angular 2: How to style host element of the component?

问题描述

我在角2分量叫我-COMP：

I have component in Angular 2 called my-comp:

<my-comp></my-comp>

如何一个样式此组件的角2主元素？

How does one style the host element of this component in Angular 2?

在聚合物，你会用：主机的选择器。我试图在角2，但是不起作用。

In Polymer, You would use ":host" selector. I tried it in Angular 2. But it doesn't work.

:host {
  display: block;
  width: 100%;
  height: 100%;
}

我还使用组件作为选择尝试：

I also tried using the component as selector:

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

这两种方法似乎并不工作。

Both approaches don't seem to work.

感谢。

推荐答案

查看这个问题。我觉得这个bug会得到解决时，<一个href=\"https://docs.google.com/document/d/11r8IuS4xDyhVSEBp7fDYo7aiLYsLEXKs4lPd36umUGM/edit#heading=h.475vdcy2xzar\"相对=nofollow> 将实施新的模板precompilation逻辑。现在我觉得你可以做的最好的就是你的模板包装成＆LT; D​​IV CLASS =根＆GT; 和风格这个 DIV ：

Check out this issue. I think the bug will be resolved when new template precompilation logic will be implemented. For now I think the best you can do is to wrap your template into <div class="root"> and style this div:

@Component({ ... })
@View({
  template: `
    <div class="root">
      <h2>Hello Angular2!</h2>
      <p>here is your template</p>
    </div>
  `,
  styles: [`
    .root {
      background: blue;
    }
  `],
   ...
})
class SomeComponent {}

请参阅这plunker

这篇关于角2：如何样式组件的host元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！