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

【问题标题】：Angular 2: How to style host element of the component?Angular 2：如何为组件的宿主元素设置样式？
【发布时间】：2015-12-27 12:30:20
【问题描述】：

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

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

谢谢。

【问题讨论】：

您确定没有应用样式吗？我已经做了一个基本的项目，并且确实做到了，并且成功了。我在我的css中设置了my-selector { color : red}，它工作正常。
从 beta 7 开始，:host 选择器对我有用。
Angular 2 Component styles
@Pacane 是的，你是对的，它工作得很好

标签： css angular css-selectors angular-components

【解决方案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/ 和>>> 不能与启用本机shadow DOM 并取决于浏览器支持的ViewEncapsulation.Native 一起使用的原因。

【讨论】：

@Component({selector: 'some-selector', template: 'xxx', styles: [':host { display: block; background-color: green; border: solid 1px red; }']}) export class SomeClass {}
@OndraŽižka 你能详细说明一下吗？这是纯CSS，怎么可能与CSS和自身不一致？
除非我错过了 CSS 中的一些重要转变，否则 /deep/ 和 >>> 不是 CSS。
它们已被弃用，但这没关系。它们由 Angular 模拟（重写），因此它们仅适用于 ViewEncapsularion.Emulated（默认）但不适用于 Native。
在 Angular 2.4.7 中，我可以让 :host { p { font-size: 80%; } } 在 ...component.css 文件中工作。一旦我尝试将它与styles: [:host { p { font-size: 80%; } }] 一起使用，它就不再起作用了。很奇怪。

【解决方案2】：

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

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

【讨论】：

我喜欢这个比创建一个虚拟的 .root 元素更好，但我不喜欢它将这些样式设置为内联（强制 !important 覆盖）。一定有更好的方法：\
不，通过host{} 在stylesUrl 文件中设置样式不起作用。需要:host。
如何访问主机内部的组件变量？如果我想动态决定背景颜色？ '：主机{背景颜色：this.bgColor； }'
@PratapA.K 您好，您可以使用 HostBinding derorator。您的示例将是：@HostBinding('style.background-color') private color = 'lime';Google 会为您找到许多示例和文章。
帮助很大。谢谢

【解决方案3】：

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

:host::ng-deep <child element>

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

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

【讨论】：

这似乎是最精确和最微妙的解决方案！干杯！

【解决方案4】：

试试 :host > /deep/ :

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

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

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

【讨论】：

如果你想要一个像 bootstrap 这样的样式表而不是单一样式怎么办？
我不再推荐这个，因为 /deep/ 已被弃用。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

查看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

【讨论】：