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 {
}
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-deep
aujourd'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 .ts
fichier du composant :
@Component({
selector: '',
template: '',
styles: [''],
encapsulation: ViewEncapsulation.None
})
Vous pouvez trouver plus d'informations sur l'encapsulation des vues dans cet article.
/deep/
et::ng-deep
sont tous deux obsolètes, je vous suggère de consulter cette réponse stackoverflow.com/a/49308475/2275011 et de commenter pour plus de détails et de solutions.