Comprendre la puissance de :: ng-deep dans angulaire 4

Vous cherchez une méthode pour remplacer les propriétés CSS dans les composants enfants à partir de composants parents? Angular 4 présente le concept de :: ng-deep, une alternative au déprécié / profond / sélecteur. Ce combinateur "Perçage de l'ombre" permet aux styles de traverser les composants enfants encapsulés. Par exemple:

. Présentation { :: ng-deep { p { &: dernier-enfant { marge-fond: 0; } } } }

Dans cet exemple, le style spécifié dans :: ng-deep sera appliqué à tous les éléments correspondants dans tous les composants enfants de la composante parent, y compris les plus imbriqués. (IE11). Bien que certaines versions IE11 puissent le supporter partiellement, il est recommandé d'utiliser des méthodes alternatives lors du ciblage des navigateurs IE11.

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

en utilisant :: Ng-Deep peut simplifier les structures de composants de style de style en permettant des éléments profondément imbriqués. Cependant, il est important de l'utiliser judicieusement car il contourne l'encapsulation, ce qui entraîne potentiellement des conflits de style ou un comportement inattendu. Utilisez :: ng-profondeur chaque fois que cela est nécessaire, mais envisagez d'explorer des alternatives plus sûres chaque fois que possible.