web-dev-qa-db-fra.com

Comment et où utiliser :: ng-deep?

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

En fait, je veux écraser certaines des propriétés CSS des composants enfants des composants parents. De plus, est-il pris en charge sur IE11?

cssangularangular-template
34
Jeyabalan Thavamani

Généralement, le combinateur /deep/ “shadow-piercing” peut être utilisé pour forcer un style à descendre à child components. Ce sélecteur avait un alias >>> et en a maintenant un autre appelé :: ng-deep.

puisque /deep/ combinator est obsolète, 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

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

il sera appliqué aux composants enfants

43
Sajeetharan - MSFT

::ng-deep, >>> et /deep/ vous donnent accès aux éléments DOM qui ne figurent pas dans le code HTML de votre composant. Par exemple, si vous utilisez Angular Matériau, certains éléments sont générés par Angular Matériau situé en dehors de la zone de votre composant (tel que dialogue ) et vous ne pouvez pas accéder à ces éléments en utilisant la méthode CSS habituelle. Si vous souhaitez modifier le style de ces éléments, vous devez utiliser l'une de ces trois choses, par exemple:

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

Pour l'instant, >>> et /deep/ sont obsolètes, il est donc préférable d'utiliser ::ng-deep.

MISE À JOUR

Les manipulations "profondes" sont également obsolètes, et avant de suivre cette méthode, je vous recommande de jeter un coup d'oeil sur la désactivation de l'approche d'encapsulation CSS (ce qui n'est pas idéal également) et de décider quelle voie est la meilleure pour votre cas. Si vous avez décidé de désactiver l’encapsulation, c’est très simple:

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

Vous pouvez trouver plus d'informations dans this article.

33
Commercial Suicide

Assurez-vous de ne pas manquer l'explication de :Host-context qui se trouve directement au-dessus de ::ng-deep dans le guide angular: https://angular.io/guide/component-styles . Déni de responsabilité: Je l'avais manqué jusqu'à présent et j'aurais bien aimé le voir plus tôt.

::ng-deep est souvent nécessaire lorsque vous n'avez pas écrit le composant et n'avez pas accès à son source, mais :Host-context peut être une option très utile lorsque vous le faites.

Par exemple, j'ai un en-tête noir <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 arrière-plan de thème sombre.

Si je n'avais pas accès à la source, je devrais peut-être le faire dans le fichier CSS pour le parent:

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

Mais au lieu de cela avec :Host-context vous pouvez faire cela à l'intérieur du 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
     }
 }

Ceci cherchera n'importe où dans la chaîne de composants pour .theme-dark et appliquera le CSS au h1 s'il est trouvé. C'est une bonne alternative à trop compter sur ::ng-deep qui, bien que souvent nécessaire, est en quelque sorte un anti-modèle.

Dans ce cas, le & est remplacé par le h1 (c'est ainsi que sass/scss fonctionne) afin que vous puissiez définir votre css "normal" et thématique/alternatif juste à côté, ce qui est très pratique.

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

13
Simon_Weaver

J'insisterais sur 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 ::ng-deep après le parent, pas avant sinon, cela s'appliquerait à toutes les classes du même nom au moment du chargement du composant.

Composant css:

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

Modèle de composant:

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

Css résultant:

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

Juste une mise à jour:

Vous devez utiliser ::ng-deep au lieu de /deep/ qui semble être obsolète.

Par documentation:

Le combinateur de descendants perçant les ombres est obsolète et la prise en charge est supprimée des principaux navigateurs et outils. En tant que tel, nous prévoyons de supprimer le support dans Angular (pour les 3 valeurs de/deep /, >>> et :: ng-deep). Jusque-là: ng-deep devrait être préféré pour une compatibilité plus large avec les outils.

Vous pouvez le trouver ici

1
Balázs Takács