我在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%;
}
这两种方法似乎都不起作用 .
谢谢 .
6 回答
有一个错误,但在此期间修复了 .
:host { }
现在工作正常 .也支持
:host(selector) { ... }
forselector
以匹配主机元素上的属性,类,....:host-context(selector) { ... }
forselector
匹配父组件上的元素,类,...对于跨元素边界匹配的样式,
selector /deep/ selector
(别名selector >>> selector
不适用于SASS)UPDATE: SASS正在弃用
/deep/
.Angular(TS和Dart)添加
::ng-deep
作为替代品,也与SASS兼容 .所有新浏览器现在都支持
::slotted
::slotted
,可以与`ViewEncapsulation.ShadowDom一起使用https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
另见Load external css style into Angular 2 Component
/deep/
和>>>
是由不推荐使用的Chrome中相同的选择器组合器 not affected .Angular模拟(重写)它们,因此不依赖于支持它们的浏览器 .
这也是为什么
/deep/
和>>>
不能与ViewEncapsulation.Native
一起使用,后者启用原生阴影DOM并依赖于浏览器支持 .我找到了一个解决方案,如何设置组件元素的样式 . 我没有找到任何文档如何工作,但您可以将属性值放入组件指令中,在'host'属性下,如下所示:
更新:正如GünterZöchbauer所说,有一个错误,现在你可以在css文件中设置主机元素的样式,如下所示:
看看this issue . 我认为在实施new template precompilation logic时将解决该错误 . 现在我认为你能做的最好的事情就是把你的模板包装成
<div class="root">
并设置这个样式div
:见this plunker
在组件中,如果要使用某些常规样式,可以将.class添加到主机元素中 .
对于任何想要设计
:host
的子元素的人来说,这里有一个如何使用::ng-deep
的示例:host::ng-deep <child element>
例如
:host::ng-deep span { color: red; }
正如其他人所说
/deep/
已被弃用试试:host> / deep /:
将以下内容添加到parent.component.less文件中
用您的子选择器替换app-child-component