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/ Angular（TS和Dart）添加::ng-deep作为替代品，与SASS兼容。
- UPDATE2： ::slotted 所有新浏览器现在都支持::slotted，可以与`ViewEncapsulation.ShadowDom一起使用 https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

另见Load external css style into 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

结帐this issue。我认为在实施new template precompilation logic时将解决该错误。现在我觉得你能做的最好的事情就是将你的模板包装成<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 {}

请参阅this plunker

Answer 4

如果你想要应用一些通用样式，你可以在你的Component中添加.class。

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

Answer 5

对于那些希望设计:host的子元素的人来说，这是一个如何使用::ng-deep

的示例

:host::ng-deep <child element>

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

正如其他人所说，/deep/已被弃用

Answer 6

试试：host＆gt; / deep /：

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

-v

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

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

6 个答案: