Sélecteurs :host, :host-context, ::ng-deep d'Angular

Cet article vous donnera une compréhension approfondie de plusieurs sélecteurs spéciaux dans angular : host, :host-context, ::ng-deep. J'espère qu'il sera utile à tout le monde !

1. :host:host

:host 表示选择当前的组件。【相关教程推荐：《angular教程》】

1.1 选择宿主元素

使用 :host 伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素），没有子元素就相当于选择整个宿主元素。

如有下面html:

<app-detail></app-detail>

组件 app-detail 的样式（整个app-detail 的样式）如下 ：

:host {
    display: inline-block;
    background: red;
}

浏览器 Elements 选择 app-detail 元素， Style 如下：

[_nghost-wtd-c445] {
    display: inline-block;
    background-color: red;
}

可以看得出来，:host 直接作用于宿主元素本身

1.2 选择宿主元素的子元素

可以在 :host 后面添加选择器以选择子元素。例如：:host h1 定位组件视图内的 h1 标签

:host h1 {
	color:red;
}

1.3 有条件的选择宿主元素

把宿主作为目标，同时带有 active 的 class 类的时候才会生效

:host(.active){
	border-width: 3px;
}

像这样：

<app-detail class="active"></app-detail>

二、 ::ng-deep

::ng-deep 可以忽略中间 className 的嵌套层级关系。直接找到你要修改的 className。

在使用一些第三方的组件的时候，要修改组件的样式,这种情况下使用.

2.1 从宿主元素到当前元素再到 DOM 中的所有子 h3 元素，包括当前组件中使用第三方组件的 h3 元素

:host ::ng-deep h3 {
  font-style: italic;
}

2.2 搜索某类型下面的特定类型

.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
     height: 120px;
     margin-top: -16px;
}

三、 :host-context

如果需要满足某条件才能应用样式。它在当前组件宿主元素的祖先节点中查找 CSS 类，直到文档的根节点为止。如果找到，才会应用后面的样式到本组件内部元素。

3.1 选择组件宿主元素中的元素

:host-context {
	color:red;
}

3.2 把宿主作为目标，同时带有active的class类的时候才会生效

在下面的例子中，只有当某个祖先元素(宿主元素也可以)有 CSS 类 theme-light 时，才会把 background-color 样式应用到本组件内部的所有 c1a436a314ed609750bd7c7d319db4da 元素中。

:host-context(.theme-light) h2 {
  background-color: #eef;
}

3.3 可以在:host-context后面添加选择器以选择子元素

例如：:host-context h1 定位组件视图内的 h1

:host signifie sélectionner le composant actuel. [Recommandations du didacticiel associé : "

Tutoriel angulaire"]

1.1 Sélectionnez l'élément hôte

Utilisez le sélecteur de pseudo-classe :host pour sélectionner le composant Les éléments de l'élément hôte (par rapport aux éléments à l'intérieur du modèle de composant) sans éléments enfants équivalent à sélectionner l'intégralité de l'élément hôte. 🎜🎜Si vous avez le html suivant :🎜

:host-context h1{
    color: hotpink;
}

🎜Le style du composant app-detail (le style de l'ensemble du app-detail) est le suivant : 🎜

h1{
    color: hotpink;

    :host-context(.active) &{
        color: yellow;
    }
}

🎜Éléments du navigateur Sélectionnez l'élément app-detail, le Style est le suivant : 🎜rrreee🎜On voit que :host agit directement sur l'élément hôte lui-même🎜 🎜🎜🎜1.2 Sélectionnez les éléments enfants de l'élément hôte🎜🎜🎜🎜Vous pouvez ajouter un sélecteur après :host pour sélectionner les éléments enfants. Par exemple : <code>:host h1 Localisez la balise h1 dans la vue du composant🎜rrreee🎜🎜🎜1.3 Sélectionnez conditionnellement l'élément hôte🎜🎜🎜🎜définissez l'hôte comme cible, with Cela ne prendra effet que lorsque la classe active est 🎜rrreee🎜Comme ceci : 🎜rrreee🎜🎜2 ::ng-deep🎜

🎜::ng-deep can. ignorez la relation hiérarchique imbriquée intermédiaire de className. Recherchez directement le nom de classe que vous souhaitez modifier. 🎜

🎜Lors de l'utilisation de certains composants tiers, vous devez modifier le style du composant. Dans ce cas, utilisez.🎜🎜🎜🎜2.1 De l'élément hôte à l'élément actuel jusqu'à tous les éléments h3 enfants du. DOM, y compris Le composant actuel utilise des éléments h3 de composants tiers🎜🎜🎜rrreee🎜🎜🎜2.2 Rechercher un type spécifique sous un certain type🎜🎜🎜rrreee🎜🎜3 :host-context. 🎜🎜Si une certaine condition doit être remplie avant que le style puisse être appliqué. Il recherche les classes CSS dans les nœuds ancestor de l'host element du composant actuel, jusqu'au nœud racine du document. Si est trouvé, les styles suivants seront appliqués aux éléments internes de ce composant. 🎜🎜🎜🎜3.1 Sélectionnez l'élément dans l'élément hôte du composant🎜🎜🎜rrreee🎜🎜🎜3.2 Cela ne prendra effet que lorsque l'hôte est la cible et a une classe active Dans l'exemple ci-dessous, le background-color</code.> sera appliqué uniquement lorsqu'un élément ancêtre (l'élément hôte est également acceptable) a la classe CSS theme-light à tous les c1a436a314ed609750bd7c7d319db4da éléments dans ce composant. 🎜rrreee🎜🎜🎜3.3 Vous pouvez ajouter un sélecteur après :host-context pour sélectionner les éléments enfants🎜🎜🎜🎜Par exemple : :host-context h1 Position h1dans le composant voir > La balise 🎜rrreee🎜🎜🎜3.4 peut être utilisée pour juger des conditions internes d'un certain style🎜🎜🎜rrreee🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Enseignement de la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!