115 votes

Comment et où utiliser ::ng-deep ?

Je suis nouveau dans Angular 4, alors quelqu'un pourrait-il m'expliquer comment et où utiliser ::ng-deep dans Angular 4 ?

En fait, je veux écraser certaines des propriétés CSS des composants enfants à partir des composants parents. De plus, est-ce que cela est supporté par IE11 ?

Merci pour votre aide.

0 votes

Depuis /deep/ et ::ng-deep sont toutes deux dépréciées, je vous suggère de consulter cette réponse stackoverflow.com/a/49308475/2275011 et commentaires pour plus de détails et de solutions.

119voto

Sajeetharan Points 108195

Habituellement /deep/ “shadow-piercing” peut être utilisé pour forcer un style à descendre jusqu'à child components . Ce sélecteur avait un alias >>> et en a maintenant un autre appelé ::ng-deep.

depuis /deep/ combinator a été déprécié, il est recommandé d'utiliser l'option ::ng-deep

Par exemple :

<div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( 'DETAILS')"></div>

et css

.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

il sera appliqué aux composants enfants

0 votes

Est-ce la prise en charge d'IE11 ?

2 votes

Angular se charge de l'analyse de ces données, de sorte que vous n'avez pas à vous soucier de la compatibilité.

1 votes

Est-ce que c'est seulement pour les composants enfants ? Si je me souviens bien et comme je l'ai vu dans un autre commentaire, c'est aussi pour les éléments dom en dehors du composant.

85voto

Commercial Suicide Points 9031

USAGE

::ng-deep , >>> et /deep/ désactive l'encapsulation des vues pour des règles CSS spécifiques, en d'autres termes, elle vous donne accès à des éléments DOM qui ne figurent pas dans le HTML de votre composant. Par exemple, si vous utilisez Angular Material (ou toute autre bibliothèque tierce comme celle-ci), certains éléments générés sont en dehors de la zone de votre composant (tels que dialogue ) et vous ne pouvez pas accéder à ces éléments directement ou en utilisant une méthode CSS classique. Si vous voulez modifier les styles de ces éléments, vous pouvez utiliser l'une de ces trois choses, par exemple :

::ng-deep .mat-dialog {
  /* styles here */
}

Pour l'instant, l'équipe d'Angular recommande de faire "profond" manipulations uniquement avec EMULÉ l'encapsulation de la vue.

DEPRECATION

"profond" les manipulations sont en fait déprécié aussi, MAIS cela fonctionne encore pour l'instant, car Angular prend en charge le prétraitement (ne vous précipitez pas pour refuser les ::ng-deep aujourd'hui, jetez un coup d'œil à pratiques de dépréciation premier).

Quoi qu'il en soit, avant de suivre cette voie, je vous recommande de jeter un coup d'oeil sur désactivation de l'encapsulation de la vue (qui n'est pas idéale non plus, car elle permet à vos styles de s'infiltrer dans d'autres composants), mais dans certains cas, c'est une meilleure solution. Si vous avez décidé de désactiver l'encapsulation de la vue, il est fortement recommandé d'utiliser des classes spécifiques pour éviter l'intersection des règles CSS, et enfin, éviter le désordre dans vos feuilles de style. Il est très facile de désactiver l'encapsulation directement dans le composant .ts fichier :

@Component({
  selector: '',
  template: '',
  styles: [''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

Vous pouvez trouver plus d'informations sur l'encapsulation de la vue dans ce article.

3 votes

La désactivation de l'encapsulation de la vue applique globalement toutes les CSS de votre composant.

22 votes

N'utilisez pas ViewEncapsulation.None ! Il fera beaucoup de dégâts en rendant possible la fuite de ces styles dans d'autres composants.

1 votes

@AlexKlaus, d'accord, c'est pourquoi j'ai mentionné dans la réponse, que ce n'est pas idéal. En fait, je l'ai utilisé une seule fois pour appliquer des styles répétables partagés à des composants Angular Material. Si vous essayez de désactiver l'encapsulation, vous risquez d'avoir un problème à un moment donné. Il est bon de connaître cette option, mais ne l'utilisez pas tant que vous n'êtes pas absolument sûr d'en avoir besoin.

55voto

Vedran Points 2107

Je voudrais souligner l'importance de limiter le ::ng-deep aux seuls enfants d'un composant en exigeant que le parent soit une classe css encapsulée.

Pour que cela fonctionne, il est important d'utiliser la fonction ::ng-deep après le parent, pas avant, sinon il s'appliquerait à toutes les classes portant le même nom au moment où le composant est chargé.

Utilisation de la :host mot-clé avant ::ng-deep s'en chargera automatiquement :

:host ::ng-deep .mat-checkbox-layout

Vous pouvez également obtenir le même comportement en ajoutant une classe CSS liée à un composant avant l'icône ::ng-deep mot-clé :

.my-component ::ng-deep .mat-checkbox-layout {
    background-color: aqua;
}

Modèle de composant :

<h1 class="my-component">
    <mat-checkbox ....></mat-checkbox>
</h1>

Le fichier css résultant (généré par Angular) comprendra alors le nom généré de manière unique et ne s'appliquera qu'à sa propre instance de composant :

.my-component[_ngcontent-c1] .mat-checkbox-layout {
    background-color: aqua;
}

10 votes

mec, ta réponse my-component ::ng-deep... vient de sauver ma journée. J'ai passé toute la journée à essayer d'appliquer un style à mon composant avec ng-deep et j'étais en train de surcharger tous les composants de mon application.

2 votes

A noter : "Afin d'étendre le style spécifié au composant actuel et à tous ses descendants [mais pas globalement], veillez à inclure le sélecteur :host avant ::ng-deep." De : angular.io/guide/component-styles

0 votes

Devrait être la réponse acceptée étant donné les explications précises

30voto

Simon_Weaver Points 31141

Ne manquez pas l'explication de :host-context qui se trouve directement au-dessus ::ng-deep dans le guide angulaire : https://angular.io/guide/component-styles . Je l'ai manqué jusqu'à présent et j'aurais aimé le voir plus tôt.

::ng-deep est souvent nécessaire lorsque vous n'avez pas écrit le composant et que vous n'avez pas accès à ses sources. :host-context peut être une option très utile lorsque vous le faites.

Par exemple, j'ai une <h1> à l'intérieur d'un composant que j'ai conçu, et je veux pouvoir le changer en blanc lorsqu'il est affiché sur un fond à thème sombre.

Si je n'avais pas accès à la source, je devrais peut-être faire cela dans la css du parent :

.theme-dark widget-box ::ng-deep h1 { color: white; }

Mais au lieu de cela, avec :host-context vous pouvez le faire à l'intérieur de le composant.

 h1 
 {
     color: black;       // default color

     :host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }

     // OR set an attribute 'outside' with [attr.theme]="'dark'"

     :host-context([theme='dark']) &
     {
         color: white;   // color for dark-theme
     }
 }

Il cherchera n'importe où dans la chaîne de composants pour .theme-dark et appliquer la css au h1 si elle est trouvée. Il s'agit d'une bonne alternative pour ne pas trop se fier à ::ng-deep qui, bien que souvent nécessaire, est un peu un anti-modèle.

Dans ce cas, le & est remplacé par le h1 (c'est ainsi que fonctionnent les sass/scss). Vous pouvez donc définir vos css " normaux " et thématiques/alternatifs juste à côté les uns des autres, ce qui est très pratique.

Faites attention à obtenir le nombre correct de : . Pour ::ng-deep il y en a deux et pour :host-context un seul.

0 votes

Vous pouvez également utiliser :host(.theme-dark) si vous ne voulez pas hériter theme-dark de tout composant parent. Cela dépendra entièrement de la conception css de votre site. Les attributs peuvent également s'avérer très utiles et peuvent être combinés de manière sophistiquée en css uniquement. :host([theme='dark']:not([dayofweek='tuesday'))

0 votes

Notez également que cela suit les règles css normales, donc si vous avez un composant comme décrit ci-dessus (avec css de contexte d'hôte) à l'intérieur d'un conteneur qui a un .theme-light qui est à son tour imbriquée dans un conteneur avec la classe .theme-dark il captera toujours le theme-dark et appliquer le css. Mais c'est une excellente solution pour les classes de type 'modernizr', ou si vous avez un thème défini globalement et une seule fois.

0 votes

Puis-je utiliser :host-context au lieu de ::ng-deep ?

2voto

Balázs Takács Points 673

Juste une mise à jour :

Vous devez utiliser ::ng-deep au lieu de /deep/ qui semble être déprécié.

Par documentation :

Le combinateur descendant à percement d'ombre est déprécié et le support est dans les principaux navigateurs et outils. En conséquence, nous prévoyons d'abandonner dans Angular (pour les trois éléments /deep/, >>> et ::ng-deep). Jusqu'à Jusqu'à ce que ::ng-deep soit préféré pour une plus grande compatibilité avec les outils les outils.

Vous pouvez le trouver ici

6 votes

Dans ce texte, il est clairement indiqué que ::ng-deep est également déprécié : "nous prévoyons d'abandonner le support dans Angular (pour les 3 /deep/, >>> et ::ng-deep)".

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X