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

Question

我看过一个有角度的路线，告诉我：

host-context 用于对组件内部的元素进行样式设置，具体取决于组件外部设置的某些条件。

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

但没有记录

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

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

没有官方文档，是否意味着当有人给出一个用例时，就意味着这是唯一涉及的情况？

Answer 1

这个答案解释之间的差异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% }