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) { ... } for selector to match attributes, classes, ... on the host element

• :host-context(selector) { ... } for selector to match elements, classes, ...on parent components

selector / deep / selector （别名 selector>>> selector 不适用于SASS）边界

selector /deep/ selector (alias selector >>> selector doesn't work with SASS) for styles to match across element boundaries

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

/ deep / 和>>> 都不受影响已被弃用。

Angular模拟（重写）它们，因此不依赖于支持它们的浏览器。

/deep/ and >>> are not affected by the same selector combinators that in Chrome which are deprecated.
Angular emulates (rewrites) them, and therefore doesn't depend on browsers supporting them.

这也是为什么 / deep / 和>>> 不适用于 ViewEncapsulation.Native ，它启用本机阴影DOM，并依赖于浏览器支持。

This is also why /deep/ and >>> don't work with ViewEncapsulation.Native which enables native shadow DOM and depends on browser support.

这篇关于Angular 2：如何设计组件的主机元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！