Angular 2:如何设计组件的主机元素? [英] Angular 2: How to style host element of the component?
问题描述
我在Angular 2中的组件称为my-comp:
I have component in Angular 2 called my-comp:
<my-comp></my-comp>
在Angular 2中如何设计此组件的主机元素?
How does one style the host element of this component in Angular 2?
在Polymer中,您将使用:host选择器。我尝试它在Angular 2.但它不工作。
In Polymer, You would use ":host" selector. I tried it in Angular 2. But it doesn't work.
:host {
display: block;
width: 100%;
height: 100%;
}
我也尝试使用组件作为选择器:
I also tried using the component as selector:
my-comp {
display: block;
width: 100%;
height: 100%;
}
这两种方法似乎都无效。
Both approaches don't seem to work.
感谢。
推荐答案
有一个错误,但是在此期间已修复。 :host {}
现在可以正常工作。
There was a bug, but it was fixed in the meantime. :host { }
works fine now.
还支持
-
:host(selector){...} for
selector
匹配属性,类...在主机元素上 -
:host-context(selector){...}
selector
匹配父组件上的元素,类...
:host(selector) { ... }
forselector
to match attributes, classes, ... on the host element:host-context(selector) { ... }
forselector
to match elements, classes, ...on parent components
selector>>>>
这篇关于Angular 2:如何设计组件的主机元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!