我在 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%;
}
这两种方法似乎都行不通。
谢谢。
最佳答案
有一个错误,但同时已修复。 :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 并依赖关于浏览器支持。
关于css - Angular 2 : How to style host element of the component?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32853924/