据我了解,:host-context
用于根据父级选择器应用样式。
让我们考虑如下规则:
:host-context(.red-theme) { 背景颜色:红色; }
同样可以使用 :host 选择器编写如下:
.red-theme :host { 背景颜色:红色; }
那么明确要求 host-context
是什么?
最佳答案
如果您想为组件自定义 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 应用程序上有多个替代主题,这很有用。
关于css - 为什么是:host-context is required when :host can suffice the needs in Angular,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56777350/