Maison > interface Web > js tutoriel > le corps du texte

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

青灯夜游
Libérer: 2022-06-20 21:08:18
avant
3271 Les gens l'ont consulté

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 !

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

<h2> 1. :host:host

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

1.1 选择宿主元素

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

如有下面html:

<app-detail></app-detail>
Copier après la connexion

组件 app-detail 的样式(整个app-detail 的样式)如下 :

:host {
    display: inline-block;
    background: red;
}
Copier après la connexion

浏览器 Elements 选择 app-detail 元素, Style 如下:

[_nghost-wtd-c445] {
    display: inline-block;
    background-color: red;
}
Copier après la connexion

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

1.2 选择宿主元素的子元素

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

:host h1 {
	color:red;
}
Copier après la connexion

1.3 有条件的选择宿主元素

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

:host(.active){
	border-width: 3px;
}
Copier après la connexion

像这样:

<app-detail class="active"></app-detail>
Copier après la connexion
<h2>二、 ::ng-deep

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

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

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

:host ::ng-deep h3 {
  font-style: italic;
}
Copier après la connexion

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

.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
     height: 120px;
     margin-top: -16px;
}
Copier après la connexion
<h2>三、 :host-context

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

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

:host-context {
	color:red;
}
Copier après la connexion

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

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

:host-context(.theme-light) h2 {
  background-color: #eef;
}
Copier après la connexion

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;
}
Copier après la connexion
🎜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;
    }
}
Copier après la connexion
🎜É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 <h2> é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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!