228

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

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

谢谢。

4

6 回答 6

318

有一个错误，但在此期间已修复。: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

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

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

这也是为什么/deep/和>>>不使用ViewEncapsulation.Native哪个启用本机影子 DOM 并取决于浏览器支持的原因。

于 2016-03-23T10:06:36.220 回答
51

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

@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{ ... }
于 2016-02-09T18:45:33.950 回答
12

看看这个问题。我认为当实现新的模板预编译逻辑时，该错误将得到解决。现在我认为你能做的最好的就是把你的模板包装成<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 {}

看到这个笨蛋

于 2015-09-30T06:50:35.740 回答
10

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

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';
于 2017-05-27T00:33:28.043 回答
6

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

:host::ng-deep <child element>

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

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

于 2017-09-24T11:56:13.923 回答
3

试试 :host > /deep/ ：

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

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

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

于 2017-09-04T14:02:00.287 回答