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

一尘不染

css

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

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

谢谢。

阅读 330

2020-05-16

共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现在所有新浏览器都支持 UPDATE2： 并且可以与`ViewEncapsulation.ShadowDom

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

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

2020-05-16