понимание силы :: ng-deep в Angular 4

ищет метод для переопределения свойств CSS в детских компонентах из родительских компонентов? Angular 4 представляет концепцию :: ng-deep, альтернатива устаревшему / глубокому / селектору. Этот комбинатор «пьеса» позволяет стилям проходить в инкапсулированные детские компоненты.

синтаксис и использование

для использования :: ng-deep просто используйте селектор Syntax :: ng-deep в пределах ваших правил CSS. Например:

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

в этом примере, стиль, указанный внутри :: ng-deep, будет применен ко всем соответствующим элементам во всех детских компонентах в родительском компоненте, включая глубоко вложенные.

Совместимость с IE11

. (IE11). В то время как определенные версии IE11 могут частично поддерживать его, рекомендуется использовать альтернативные методы при нацеливании на браузеры IE11.

Преимущества и соображения

использование :: ng-deep могут упростить структуру компонентов стиля, позволяя доступу к глубоко изложенным элементам. Тем не менее, важно использовать его разумно, когда он обходит инкапсуляцию, что может привести к конфликтам в стиле или неожиданном поведении. Используйте :: ng-deep, когда это необходимо, но подумайте о том, чтобы исследовать более безопасные альтернативы, когда это возможно.