Приціл у стилі CSS серії Angular 9 (VII)

Маленька покидька · Опубліковано 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 9 Series (IV) Custom Pipe
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

Оглядаючись назад, ми намагалися змінити стиль запровадженої сторонньої компоненти раніше, але це не вдалося.

Стиль компонента Angular Setting 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

Вхід видно.

[Кутовий голос] Приціл у стилі CSS серії Angular 9 (VII)

Пов'язані дописи

Переглянуті розділи