Angular 2:如何设置组件的主机元素？

Question

我在Angular 2中有一个名为my-comp的组件:

<my-comp></my-comp>

如何在Angular 2中设置此组件的主机元素的样式？

在Polymer中,您将使用":host"选择器.我在Angular 2中尝试过它.但它不起作用.

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

我也尝试使用组件作为选择器:

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

这两种方法似乎都不起作用.

谢谢.

Answer 1

有一个错误,但在此期间修复了.:host { }现在工作正常.

也支持

• :host(selector) { ... }用于selector匹配主机元素上的属性,类,...

• :host-context(selector) { ... }用于selector匹配父组件上的元素,类,...

• selector /deep/ selector(别名selector >>> selector不适用于SASS)样式要跨元素边界匹配

  • 更新: SASS正在弃用/deep/.
    角度(TS和Dart)::ng-deep作为替代品添加,也与SASS兼容.

  • UPDATE2: ::slotted ::slotted现在所有新的浏览器支持,可以用`ViewEncapsulation.ShadowDom使用
    https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

另请参阅将外部css样式加载到Angular 2 Component中

/deep/而>>>在不影响通过在Chrome中被弱化了相同的选择组合程序.
Angular模拟(重写)它们,因此不依赖于支持它们的浏览器.

这也是为什么/deep/并且>>>不能使用ViewEncapsulation.Native本机影子DOM并依赖于浏览器支持的原因.

Answer 2

我找到了一个解决方案,如何设置组件元素的样式.我没有找到任何文档如何工作,但您可以将属性值放入组件指令中,在'host'属性下,如下所示:

@Component({
    ...
    styles: [`
      :host {
        'style': 'display: table; height: 100%',
        'class': 'myClass'
      }`
})
export class MyComponent
{
    constructor() {}

    // Also you can use @HostBinding decorator
    @HostBinding('style.background-color') public color: string = 'lime';
    @HostBinding('class.highlighted') public highlighted: boolean = true;
}

更新:正如GünterZöchbauer所说,有一个错误,现在你可以在css文件中设置主机元素的样式,如下所示:

:host{ ... }

Answer 3

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 {}

See this plunker

Answer 4

在组件中,如果要使用某些常规样式,可以将.cl​​ass添加到主机元素中.

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';

Answer 5

对于希望为a的子元素设置样式的任何人，:host这里都是如何使用的示例::ng-deep

:host::ng-deep <child element>

例如 :host::ng-deep span { color: red; }

正如其他人所说/deep/的那样