Comment puis-je styliser les composants enfants du parent dans Angular en utilisant ::ng-deep ?

Style des composants enfants du parent : utilisation de :: ng-deep dans Angular

Introduction
Dans Angular 4, les développeurs peuvent être confrontés à des situations dans lesquelles il devient nécessaire de modifier les propriétés CSS des composants enfants du composant parent. Cela nécessite une méthode pour pénétrer à travers les limites du Shadow DOM et cibler les styles souhaités. Le sélecteur ::ng-deep fournit une solution à ce défi.

Utilisation de ::ng-deep
::ng-deep est un sélecteur perçant l'ombre qui permet d'accéder aux styles des composants enfants du composant parent. Il s'agit de l'alternative actuellement recommandée au combinateur /deep/ obsolète, et il partage le même alias avec >>>. En utilisant ::ng-deep, les styles appliqués dans le composant parent peuvent se répercuter et affecter les composants enfants.

Exemple
Pour illustrer l'utilisation de ::ng-deep, considérons le code suivant :

<code class="html"><div class="overview tab-pane" id="overview" role="tabpanel"></div></code>

<code class="css">.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}</code>

Dans cet exemple, les styles appliqués à la classe .overview à l'aide de ::ng-deep seront appliqués aux éléments p dans le composant enfant du .overview classe. La pseudo-classe &:last-child affectera le dernier élément p de ce composant enfant, supprimant la marge inférieure par défaut.

Support IE11
Il est important de noter que :: ng-deep n'est pas pris en charge dans IE11. Pour les navigateurs qui ne prennent pas en charge ::ng-deep, des méthodes alternatives telles que ViewEncapsulation.None et encapsulation: "none" dans les projets Angular CLI peuvent être explorées pour obtenir des fonctionnalités similaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!