Comment et où utiliser :: ng-deep?

Je suis nouveau dans Angular 4, alors quelqu'un pourrait-il expliquer comment et où l'utiliser ::ng-deepdans 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?

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

depuis /deep/ combinatorest 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

USAGE

::ng-deep, >>>et /deep/désactivez l'encapsulation de vue pour des règles CSS spécifiques, en d'autres termes, cela vous donne accès aux éléments DOM, qui ne sont 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 (comme la boîte de dialogue ) et vous ne pouvez pas accéder à ces éléments directement ou en utilisant un CSS standard façon. Si vous souhaitez 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 angulaire recommande de faire « profonds » manipulations uniquement avec émulé encapsulation vue.

DÉSAPPROBATION

Les manipulations "profondes" sont en fait obsolètes aussi, MAIS cela fonctionne toujours pour le moment, car Angular prend en charge le pré-traitement (ne vous précipitez pas pour refuser ::ng-deepaujourd'hui, jetez d'abord un coup d'œil aux pratiques de dépréciation ).

Quoi qu'il en soit, avant de suivre cette voie, je vous recommande de jeter un œil à la désactivation de l' approche d' encapsulation de vue (ce qui n'est pas non plus idéal, cela permet à vos styles de s'infiltrer dans d'autres composants), mais dans certains cas, c'est un meilleur moyen. Si vous avez décidé de désactiver l'encapsulation des vues, il est fortement recommandé d'utiliser des classes spécifiques pour éviter l'intersection des règles CSS, et enfin, éviter un désordre dans vos feuilles de style. Il est vraiment facile de désactiver directement dans le .tsfichier du composant :

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

Vous pouvez trouver plus d'informations sur l'encapsulation des vues dans cet article.

Je voudrais souligner l'importance de limiter les ::ng-deepaux 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-deepaprès le parent, pas avant sinon cela s'appliquerait à toutes les classes avec le même nom au moment où le composant est chargé.

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 (généré angulaire):

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

ÉDITER:

Vous pouvez obtenir le même comportement en utilisant le :hostmot - clé au lieu de créer une nouvelle classe css.

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

Assurez-vous de ne pas manquer l'explication :host-contextqui se trouve directement au-dessus ::ng-deepdans le guide angulaire: https://angular.io/guide/component-styles . Avertissement: je l'ai manqué jusqu'à maintenant et j'aurais aimé le voir plus tôt.

::ng-deepest souvent nécessaire lorsque vous n'avez pas écrit le composant et n'avez pas accès à sa source, mais :host-contextpeut être une option très utile lorsque vous le faites.

Par exemple, j'ai un en- <h1>tête noir à l' intérieur d'un composant que j'ai conçu et je souhaite pouvoir le changer en blanc lorsqu'il est affiché sur un arrière-plan à thème sombre.

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

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

Mais à la place, :host-contextvous pouvez le faire à 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
     }
 }

Cela cherchera n'importe où dans la chaîne de composants .theme-darket appliquera le css au h1 s'il est trouvé. C'est une bonne alternative au fait de trop compter sur ::ng-deepce 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é de l'autre, ce qui est très pratique.

Veillez à obtenir le nombre correct de fichiers :. Car ::ng-deepil y en a deux et pour :host-contextun seul.

Juste une mise à jour:

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

Par documentation:

Le combinateur descendant qui perce 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 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

Utilisez :: ng-deep avec précaution. Je l'ai utilisé tout au long de mon application pour définir la couleur de la barre d'outils de conception de matériaux sur différentes couleurs dans mon application uniquement pour constater que lorsque l'application testait les couleurs de la barre d'outils les unes sur les autres. Venez découvrir que c'est parce que ces styles deviennent globaux, voir cet article Voici une solution de code fonctionnelle qui ne se répand pas dans les autres composants.

<mat-toolbar #subbar>
...
</mat-toolbar>

export class BypartSubBarComponent implements AfterViewInit {
  @ViewChild('subbar', { static: false }) subbar: MatToolbar;
  constructor(
    private renderer: Renderer2) { }
  ngAfterViewInit() {
    this.renderer.setStyle(
      this.subbar._elementRef.nativeElement, 'backgroundColor', 'red');
  }

}