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

Question

我正在尝试使用:hostwithEncapsulation.None但样式不适用。

这应该工作，如果是这样如何？

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

两者都有css：

:host {
  color:red;
}

输出是：

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

Answer 1

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

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

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

有关演示，请参阅此 stackblitz。