Angular: CSS одного компонента конфликтует с другим компонентом.

Question

Иерархия моего проекта выглядит следующим образом:

Component_HomePage
   |
   |---> Component_Tool1
   |        |
   |        ---> Component_Inner_01
   |
   |---> Component_Tool2
            |
            ---> Component_Inner_02

Очевидно, что все компоненты имеют разные стили.

Хотя в Component_Inner_01 & Component_Inner_02 есть некоторые классы CSS, чьи имена такие же, но содержимое другое.

Например:

Component_Inner_01.CSS, имеющий list-group-item класс

.list-group-item{
    padding: 0px;
}

И у Component_Inner_02.CSS также есть list-group-item, но содержимое отличается.

.list-group-item{
    padding: 10px;
}

Итак, впервые, когда я просматриваю Component_Inner_01, список-группа-элемент принимает заполнение как 0px, что идеально.

Но когда я просматриваю страницу Component_Inner_01 после просмотра страницы Component_Inner_02, класс-элемент списка-списка Component_Inner_01 принимает заполнение как 10px.

Я понял, что проблема была в Component_Inner_02

Декоратор Component_Inner_02, имеющий метаданные encapsulation, для которого установлено ViewEncapsulation.None

Но я не знаю, что заставляет CSS-классы конфликтовать друг с другом при наличии encapsulation: ViewEncapsulation.None, кто-нибудь может объяснить?

Answer 1

Вид инкапсуляции означает, что ваш вид инкапсулирован: это означает, что Angular добавляет случайные атрибуты к вашим тегам, чтобы отличать их от одного к другому.

Если вы используете encapsulation: ViewEncapsulation.None, то ваше представление больше не будет инкапсулировано: стили не имеют случайных атрибутов и начинают конфликтовать.

Если вы хотите остановить это, удалите эту строку из вашего компонента.

CLI предоставляет глобальную таблицу стилей под названием style.[extension], в которую можно поместить все глобальные стили. Вам не нужно деактивировать инкапсуляцию.

Answer 2

Вместо удаления строки, как сказал #trichetriche, используйте необходимый механизм инкапсуляции.

FYI

ViewEncapsulation.Emulated: любые стили, которые мы определяем для компонента, нет утечка к остальной части приложения.Но компонент все еще наследует глобальные стили, такие как twitter bootstrap .

ViewEncapsulation.Native: стили, которые мы устанавливаем для компонента, не просачиваются за пределы области действия компонентов.Компонент также изолирован от глобальных стилей, которые мы определили для нашего приложения.

ViewEncapsulation.None: мы ничего не инкапсулируем, стиль, который мы определили в нашем компоненте, просочился и начал влиять на другие компоненты.

Answer 3

Вы можете создать элемент-обертку и присвоить ему идентификатор, использовать этот идентификатор, чтобы задать стили для этого конкретного компонента. И то же самое для второго компонента. Чтобы стили не конфликтовали друг с другом.

<div id="component1">
    //Component1 code here
</div>

<div id="component2">
    //Component2 code here
</div>

Стили

#component1 .list-group-item {
    padding: 0px;
}

#component2 .list-group-item {
    padding: 10px;
}