Angular серия 9 (VII) CSS стил оптика

Малък боклук · Публикувано в 17.06.2020 г. 16:46:59 ч.

Динамично натоварени компоненти от Angular 9 серия (1)
https://www.itsvse.com/thread-9238-1-1.html

Ъглова серия 9 (2) параметри за динамично предаване на компоненти
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 серия (3) се абонира за динамични компонентни събития
https://www.itsvse.com/thread-9246-1-1.html

Angular Series 9 (IV) Custom Pipe Pipelines
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) форматира формата на сумата валута
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 series (VI) извиква нативни JS променливи и методи
https://www.itsvse.com/thread-9254-1-1.html

Сега, с поглед назад, опитахме да модифицираме стила на въведения компонент на трета страна преди, но не успяхме.

Ъглова настройка на компонент CSS стил не приема ефект решение
https://www.itsvse.com/thread-9184-1-1.html

:host представлява селектор, който избира текущия компонент.
::ng-deep може да игнорира вложените йерархични отношения на междинния className. Намери директно името на класа, който искаш да промениш.
Въпреки това, официалната документация казва, че ng-deep ще бъде изоставен в бъдещи версии и не е известно какъв синтаксис ще стане в бъдеще.

Свойството върху компонента може да се зададе на styleUrls, за да се зададе css стиловия лист на текущия компонент.

Въведеният стилов лист засяга само текущия елемент на таг и не засяга други компоненти, което е важна характеристика на рамката Angular.

CSS код:

Входът е видим.

Нека разгледаме финалния генериран CSS стил през браузъра, както е показано по-долу:

.itsvse1[_ngcontent-serverApp-c228] {
background-color:azure;
}

[_nghost-serverApp-c228] .itsvse2 {
Цвят на фона: зелен;
}

[_nghost-serverApp-c228] .itsvse3 {
Цвят на фона: червен;
}

.itsvse4 {
Цвят на фона: Aqua;
}

.itsvse1 стилизира само текущия компонент, .itsvse2 и .itsvse3 влияят на стила на въведените дъщерни компоненти, а .itsvse3 влияе на глобалния стил.

itsvse1 CSS може да повлияе на текущия компонент само защото всички текущи елементи на възел ще добавят атрибута "_ngcontent-serverapp-c228", както е показано на фигурата по-долу:

(Край)

Малък боклук · Публикувано в 26.11.2021 г. 17:07:00 ч.

Три начина за използване на ъглова капсулация
https://www.itsvse.com/thread-9200-1-1.html

Входът е видим.

[Ъглова] Angular серия 9 (VII) CSS стил оптика

Свързани публикации

Разгледани секции