是否可以使用:具有Encapsulation.None角的主机样式？

Question

我试图将:host与Encapsulation.None结合使用，但样式没有应用。

这应该有效吗?如果是的话，该如何运作呢？

下面的示例有两个相同的子组件，除了Encapsulation.None (其中没有应用主机样式)和Encapsulation.Emulated (其中应用了主机样式)。

两者都有css：

:host {
  color:red;
}

产出如下：

​

​

Stackblitz：https://stackblitz.com/edit/angular-kvjma8?file=src%2Fapp%2Fapp.component.html

Answer 1

当封装设置为ViewEncapsulation.None时，组件选择器可以用作CSS选择器来样式主机元素。

/* With ViewEncapsulation.Emulated, use :host selector */
:host {
  color: red;
}

/* With ViewEncapsulation.None, use component selector */
app-child-encapsulation-none {
  color: green;
}

有关演示，请参见这一堆闪电战。