当：host可以满足Angular的需求时，为什么需要：host-context

Question

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

让我们考虑如下规则：

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

可以使用：host选择器将以下内容写成相同的内容：

.red-theme :host { background-color: red; }

然后明确要求host-context吗？

Answer 1

如果要设置组件自定义HTML元素本身的样式，请使用/proc/sys/fs/file-max。

当您还想让组件应用样式时，请使用:host，其中要考虑到呈现组件的上下文。

例如，您可以这样做：（使用:host-context）

host-context

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

app-component

并定义了组件样式：

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

如果要在Web应用程序上具有多个替代主题，则很有用。