角度2：如何为组件的宿主元素设置样式？

我在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%;
}

两种方法似乎都不起作用。

谢谢。

有一个错误，但在此同时已修复。:host { }现在工作正常。

还支持

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

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

• selector /deep/ selector（别名selector >>> selector不适用于SASS）以使样式跨元素边界匹配

  • 更新： SASS正在弃用/deep/。
    添加了Angular（TS和Dart）::ng-deep作为替代品，该替代品也与SASS兼容。

  • UPDATE2： ::slotted ::slotted现在所有新浏览器都支持UPDATE2：并可以与`ViewEncapsulation.ShadowDom
    https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

另请参阅将外部CSS样式加载到Angular 2组件中

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

这也是为什么/deep/且>>>不起作用的原因，ViewEncapsulation.Native它启用了本地阴影DOM并依赖于浏览器支持。

我找到了一种解决方案，如何仅对组件元素进行样式设置。我还没有找到任何文档，它是如何工作的，但是您可以将属性值放入“ host”属性下的component指令中，如下所示：

@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元素的样式，如下所示：

:host{ ... }

看看这个问题。我认为当实施新的模板预编译逻辑时，该错误将得到解决。现在，我认为您能做的最好的就是将模板包装进去<div class="root">并设置样式div：

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

看到这个矮人

如果您要使用某些常规样式，则可以在Component中将.class添加到host元素。

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

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

:host::ng-deep <child element>

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

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

尝试：host> / deep /：

将以下内容添加到parent.component.less文件中

:host {
    /deep/ app-child-component {
       //your child style
    }
}

用子选择器替换app-child-component