:host-context选择器在angular中的用例是什么 [英] What is the use case of :host-context selector in angular

问题描述

我看过一段弯角的航迹:

I've seen an angular course telling that :

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

host-context is used to style elements inside a component, depending on some condition set outside of it.

我已经在 https://angular.io

但未记录

有人可以解释一下我可以将此选择器用于角度分量的不同用例吗?

can some one explain the different use cases where I can use this selector for an angular component ?

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

can some one explain the whole meaning of the -context added to host here ?

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

without an official documentation, does it mean that when someone give one use case, it mean that it is the only case the thing refers to ?

推荐答案

此答案解释了host和host-context.这是host-context用法的示例.假设您有一个包装输入的组件，并且此输入可在两个不同的组件(表和下拉菜单)中使用.在下拉菜单中时，它应该占据宽度的50％，在表格中时-100％.现在，如果您定义了这两个组件选择器，如下所示:

This answer explains the difference between host and host-context. Here is an example of host-context usage. Suppose you have a component that wraps an input and this input can be used inside two different components - table and dropdown. When inside a dropdown it should occupy 50% of the width, when in table - 100%. Now if you have these two components selectors defined like this:

<my-dropdown>
<my-table>

然后可以如下定义输入组件的样式:

Then the styles for the input component can be defined like this:

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

这篇关于:host-context选择器在angular中的用例是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！