Comment et où utiliser ::ng-deep ?

Question

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.

Answer 1

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

Answer 2

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;
}

Answer 3

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.

Answer 4

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.

Answer 5

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