Où et comment utiliser ::ng-profondeur?
Je suis nouveau sur Angulaire 4, si quelqu'un pourrait-il expliquer comment et où utiliser ::ng-deep
Angulaire 4?
En fait, je veux remplacer certaines des propriétés CSS de l'enfant composantes de la société mère composants. Par ailleurs est-il pris en charge sur IE11?
OriginalL'auteur thilagabalan | 2017-10-17
Vous devez vous connecter pour publier un commentaire.
Généralement
/deep/“shadow-piercing”
combinator peut être utilisé pour forcer un style àchild components
. Ce sélecteur avait un alias >>>, et a maintenant un autre appelé ::ng-profonde.depuis
/deep/combinator
a été abandonné, il est recommandé d'utiliser::ng-deep
Par exemple:
<div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( 'DETAILS')"></div>
et
css
il sera appliqué à l'enfant composants
Je l'ai essayé sur IE11 et de travail
Angulaire de l'analyse de ce - de sorte que vous n'avez pas besoin de vous soucier de la compatibilité.
OriginalL'auteur Sajeetharan
::ng-deep
,>>>
et/deep/
sont en vous donnant accès à des éléments du DOM, qui ne sont pas dans votre élément HTML. Par exemple, si vous utilisez Angulaire documents, certains éléments sont générés par Angulaire de la matière à l'extérieur de votre composant (tels que lesboîte de dialogue
) et vous ne pouvez pas accéder à ces éléments à l'aide de la CSS normal. Si vous souhaitez changer de style de ces éléments, vous devez utiliser l'une des trois choses, par exemple:Pour l'instant
>>>
et/deep/
sont obsolètes, afin de mieux utiliser::ng-deep
.OriginalL'auteur Commercial Suicide
Assurez-vous de ne pas manquer l'explication de la
:host-context
qui est directement au-dessus de::ng-deep
dans l'angle de guide : https://angular.io/guide/component-styles. Avertissement: je l'ai raté jusqu'à présent, et souhaite que je l'avais vu plus tôt.::ng-deep
est souvent nécessaire lorsque vous n'avez pas écrit le composant et n'ont pas accès à sa source, mais:host-context
peut être une option très utile quand vous le faites.Par exemple, j'ai un noir
<h1>
en-tête à l'intérieur d'un composant que j'ai conçu, et je veux avoir la possibilité de changer en blanc lorsqu'elle est affichée sur un sombre sur le thème d'arrière-plan.Si je n'ai pas accès à la source j'ai peut-être de le faire dans le css pour le parent:
Mais plutôt avec
:host-context
vous pouvez le faire à l'intérieur de le composant.Ce sera l'apparence de n'importe où dans le composant de la chaîne de
.theme-dark
et appliquer le css de la h1, le cas échéant. C'est une bonne alternative à trop compter sur les::ng-deep
qui, bien que souvent nécessaire est un peu d'un anti-modèle.Dans ce cas, le
&
est remplacé par leh1
(c'est comme sass/scss œuvres), de sorte que vous pouvez définir votre 'normal' et de thème/css alternative à droite à côté de l'autre ce qui est très pratique.Être prudent pour obtenir le bon nombre de
:
. Pour::ng-deep
il y a deux et pour:host-context
seul.:host(.theme-dark)
si vous ne voulez pas héritertheme-dark
à partir de n'importe quel parent composants. Cela dépend entièrement de votre site css design. Aussi les attributs peuvent être très utiles et peuvent être combinées de moyens sophistiqués dans le css seul:host([theme='dark']:not([dayofweek='tuesday'))
Notez également qu'il suit la procédure normale de règles css, donc si vous avez un composant tel que décrit ci-dessus (avec l'hôte contexte css) à l'intérieur d'un conteneur qui a un
.theme-light
classe c'est à son tour imbriquée à l'intérieur d'un conteneur avec.theme-dark
il va toujours chercher latheme-dark
et appliquer le css. Mais c'est une excellente solution pour les "modernizr' des classes de type, ou si vous avez un thème défini à l'échelle mondiale et une seule fois.OriginalL'auteur Simon_Weaver
Juste une mise à jour:
Vous devez utiliser
::ng-deep
au lieu de/deep/
qui semble être obsolète.Par la documentation:
Vous pouvez le trouver ici
OriginalL'auteur Balázs Takács