Angular 2：如何给组件的宿主元素设置样式？

Question

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

<my-comp></my-comp>

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

在 Polymer 中，您将使用“:host”选择器。我在Angular2试过了，但是不行。

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

我也试过使用组件作为选择器：

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

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

谢谢。

Answer 1

签出this issue. I think the bug will be resolved when 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 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ünter Zöchbauer 提到的，存在一个错误，现在您甚至可以在 css 文件中设置宿主元素的样式，如下所示：

:host{ ... }

Answer 3

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

还支持

:host(selector) { ... } 用于 selector 匹配属性，类，...在宿主元素上
:host-context(selector) { ... } 用于 selector 匹配元素，类，...在父组件上
selector /deep/ selector（别名 selector >>> selector 不适用于 SASS）用于跨元素边界匹配的样式
- 更新： SASS 弃用 /deep/.
  Angular（TS 和 Dart）添加了 ::ng-deep 作为与 SASS.
- 更新2： ::slotted ::slotted 现在受到所有新浏览器的支持，并且可以与 `ViewEncapsulation.ShadowDom
  一起使用 https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

另见

/deep/ 和 >>> 不受与 Chrome 中已弃用的相同选择器组合器的影响。
Angular 模拟（重写）它们，因此不依赖于支持它们的浏览器。

这也是为什么 /deep/ 和 >>> 不能与启用原生阴影 DOM 并依赖于浏览器支持的 ViewEncapsulation.Native 一起工作。

Answer 4

在您的组件中，如果您想要应用一些通用样式，您可以将 .class 添加到您的宿主元素。

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

Answer 5

试试 :host > /deep/ :

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

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

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

Answer 6

对于希望为 :host 的子元素设置样式的任何人，这里有一个如何使用 ::ng-deep

的示例

:host::ng-deep <child element>

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

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

Angular 2：如何给组件的宿主元素设置样式？

Angular 2: How to style host element of the component?

css

angular

css-selectors

angular-components