css - 为什么是:host-context is required when :host can suffice the needs in Angular

Question

据我了解，:host-context 用于根据父级选择器应用样式。

让我们考虑如下规则:

:host-context(.red-theme) { 背景颜色:红色； }

同样可以使用 :host 选择器编写如下:

.red-theme :host { 背景颜色:红色； }

那么明确要求 host-context 是什么？

Answer 1

如果您想为组件自定义 HTML 元素本身设置样式，请使用 :host。

:host-context 用于当您还希望让组件应用样式并考虑呈现组件的上下文时使用。

因此，例如，您可以这样做:(使用 host-context)

<div class="red-theme">
    <app-component></app-component>
</div>

哪里 app-component

<button class="btn btn-theme">Button</button>

并且定义了组件样式:

:host-context(.red-theme) .btn-theme {
    background: red;
 }

如果您想在您的 Web 应用程序上有多个替代主题，这很有用。