angular中的：host-context选择器的用例是什么

Question

我看过一个有角度的课程告诉你：

host-context 用于根据组件外部设置的某些条件设置组件内部元素的样式。

我已经在 https://angular.io 中搜索了它的官方文档

但没有记录

有人可以解释我可以将此选择器用于角度组件的不同用例吗？

有人可以解释这里添加到主机的-context 的全部含义吗？

没有官方文档，是否意味着当有人给出一个用例时，就意味着它是该事物所指的唯一用例？

Answer 1

This answer 解释了host 和host-context 之间的区别。这是host-context 用法的示例。假设您有一个包含输入的组件，并且该输入可以在两个不同的组件中使用 - 表格和下拉列表。当在下拉列表中时，它应该占据宽度的 50%，在表格中时 - 100%。现在，如果您有这样定义的这两个组件选择器：

<my-dropdown>
<my-table>

那么输入组件的样式可以这样定义：

:host-context(my-dropdown) input { width: 50% }
:host-context(my-table) input { width: 100% }