Как заменить класс CSS угловой составляющей

Question

мои вопросы очень просты, у меня есть угловой компонент, использующий следующий класс CSS:

.noUi-connect{
  background:#294664;
}

Мои вопросы: как родительский компонент может изменить класс css дочернего компонента, что для меня является черным ящиком, я не могу напрямую получить доступ к его css?

Я попробовал следующее в родительском компоненте класса CSS, но он не работает:

:host.noUi-connect{
  background:#294664!important;
}

Большое спасибо!

Answer 1

Вы должны указать Angular явно нарушить инкапсуляцию нормального представления

:host ::ng-deep .noUi-connect {
    background:#294664!important;
}

Это повлияет на ВСЕ .noUi-connect внутри хоста, независимо от его глубины - IE будет вести себя почти как ванильный стиль CSS.

Дополнительная информация: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

---

Как отмечено в документации Angular, это (якобы) устарело и в конечном итоге будет удалено. Об этом много говорится, но в настоящее время это все еще рекомендуемый способ решения этой проблемы, поскольку альтернативного метода не существует.