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 vous sera utile !

1. :host

:host signifie sélectionner le composant actuel. [Tutoriels associés recommandés : "tutoriel angulaire"]

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

Utilisez le sélecteur de pseudo-classe :host pour sélectionner des éléments dans l'宿主元素du composant (par rapport aux éléments à l'intérieur du modèle de composant). S'il n'y a pas d'éléments enfants, cela équivaut à sélectionner l'intégralité de宿主元素.

S'il existe le code HTML suivant :

 <app-detail></app-detail>

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

 :hôte {
affichage : bloc en ligne ;
fond : rouge ;
}

Les Elements du navigateur sélectionnent app-detail et le style est le suivant :

 [_nghost-wtd-c445] {
affichage : bloc en ligne ;
couleur de fond : rouge ;
}

On voit que :host agit directement sur宿主元素本身

1.2 Sélectionner les éléments enfants de l'élément hôte

Vous pouvez ajouter un sélecteur après :host pour sélectionner子元素. Par exemple : :host h1 localise la balise h1 dans la vue des composants

 :hôte h1 {
	couleur : rouge ;
}

1.3 Sélection conditionnelle des éléments hôtes

Cela ne prendra effet que lorsque l'hôte est utilisé comme cible et possède une classe active.

 :hôte(.active){
	largeur de la bordure : 3 px ;
}

Comme ça:

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

2. ::ng-deep

::ng-deep peut ignorer la relation hiérarchique imbriquée des noms de classe intermédiaires. Recherchez directement le nom de classe que vous souhaitez modifier.

Lorsque vous utilisez 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, puis à tous les éléments h3 enfants du DOM, y compris les éléments h3 utilisant des composants tiers dans le composant actuel

 :host ::ng-deep h3 {
style de police : italique ;
}

2.2 Rechercher un type spécifique sous un certain type

 .card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
hauteur : 120px ;
marge supérieure : -16 px ;
}

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祖先de l'宿主元素du composant actuel, jusqu'au nœud racine du document.如果sont trouvés, les styles suivants seront appliqués aux éléments internes本组件.

3.1 Sélectionner des éléments dans l'élément hôte du composant

 :contexte-hôte {
	couleur : rouge ;
}

3.2 Cela ne prendra effet que lorsque l'hôte est utilisé comme cible et dispose d'une classe active.

Dans l'exemple suivant, background-color sera appliqué à tous les éléments <h2>本组件内部uniquement si un祖先元素(l'élément hôte peut également être utilisé) possède la classe CSS theme-light .

 :host-context(.theme-light) h2 {
couleur d'arrière-plan : #eef ;
}

3.3 Vous pouvez ajouter un sélecteur après :host-context pour sélectionner des sous-éléments

Par exemple : :host-context h1 localise la balise h1 dans la vue des composants

 :contexte-hôte h1{
couleur : rose vif ;
}

3.4 Peut être utilisé pour juger des conditions internes d'un certain style

 h1{
couleur : rose vif ;

:contexte-hôte(.active) &{
couleur : jaune ;
}
}