是否可以在 Angular 中使用 :host 和 Encapsulation.None 来设置样式？答案

【问题标题】：Is it possible to style using :host with Encapsulation.None in Angular?是否可以在 Angular 中使用 :host 和 Encapsulation.None 来设置样式？
【发布时间】：2020-04-08 07:50:57
【问题描述】：

我正在尝试将:host 与Encapsulation.None 一起使用，但样式不适用。

这应该有效吗？如果有效，应该怎么做？

下面的示例，除了 Encapsulation.None（不应用主机样式）和 Encapsulation.Emulated（应用主机样式）之外，有 2 个子组件是相同的。

两者都有 css:

:host {
  color:red;
}

输出是：

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

【问题讨论】：

我的猜测是没有。 Host 表示该组件的视图封装。

标签： css angular

【解决方案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;
}

请参阅this stackblitz 以获取演示。

【讨论】：