Angular Series 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 9 Series (IV)
https://www.itsvse.com/thread-9248-1-1.html

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

Angular 9 серия (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 Series 9 (VII) в стиле CSS

Связанные публикации

Просмотренные разделы