Comprender el poder de :: ng-Dep en angular 4

¿Buscando un método para anular las propiedades de CSS en los componentes infantiles de los componentes principales? Angular 4 introduce el concepto de :: Ng-DepeP, una alternativa a la desapercibida / profunda / selector. Este combinador de "perforación de sombras" permite que los estilos atraviesen los componentes infantiles encapsulados.

sintaxis y use

para utilizar :: ng-deep, simplemente emplea la selección de sintaxis :: ng-deep dentro de sus reglas CSS. Por ejemplo:

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

En este ejemplo, el estilo especificado dentro de :: ng-defeep se aplicará a todos los elementos coincidentes en todos los componentes infantiles dentro del componente principal, incluidos los profundamente anidados.

la compatibilidad con IE11

vale (IE11). Si bien ciertas versiones IE11 pueden admitirlo parcialmente, se recomienda utilizar métodos alternativos al dirigir los navegadores IE11.

beneficios y consideraciones

usando :: ng-Deep puede simplificar estructuras componentes complejas de estilo al permitir el acceso a los elementos innecesarios. Sin embargo, es importante usarlo juiciosamente ya que omite la encapsulación, lo que puede conducir a conflictos de estilo o un comportamiento inesperado. Use :: Ng-Depe siempre que sea necesario, pero considere explorar alternativas más seguras siempre que sea posible.