Angular serii 9 (VII) w stylu CSS

Mały śmiecie · Opublikowano 17.06.2020 16:46:59

Elementy dynamicznie obciążone w serii Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Parametry transmisji dynamicznych komponentów serii 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

Seria Angular 9 (3) subskrybuje dynamiczne zdarzenia komponentowe
https://www.itsvse.com/thread-9246-1-1.html

Rurociągi niestandardowe Angular 9 Series (IV)
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formatuje format waluty kwotowej
https://www.itsvse.com/thread-9249-1-1.html

Seria Angular 9 (VI) wywołuje natywne zmienne i metody JS
https://www.itsvse.com/thread-9254-1-1.html

Z perspektywy czasu próbowaliśmy wcześniej zmodyfikować styl wprowadzonego komponentu firm trzecich, ale nie udało się to.

Styl CSS z ustawieniem kątowym nie ma efektu rozwiązania
https://www.itsvse.com/thread-9184-1-1.html

:host reprezentuje selektor, który wybiera aktualny komponent.
::ng-deep może ignorować zagnieżdżone relacje hierarchiczne klasy pośredniej Name. Bezpośrednio znajdź nazwę klasy, którą chcesz zmodyfikować.
Jednak oficjalna dokumentacja mówi, że ng-deep zostanie porzucony w przyszłych wersjach i nie wiadomo, jaką składnią przyniesie w przyszłości.

Właściwość nad komponentem można ustawić na styleUrls, aby ustawić arkusz stylów css aktualnego komponentu.

Wprowadzony arkusz stylów wpływa tylko na aktualny element tagu i nie wpływa na inne komponenty, co jest ważną cechą frameworka Angular.

Kod CSS:

Logowanie jest widoczne.

Przyjrzyjmy się końcowemu wygenerowanemu stylu CSS przez przeglądarkę, jak pokazano poniżej:

.itsvse1[_ngcontent-serverApp-c228] {
tło: błękitny;
}

[_nghost-serverApp-c228] .itsvse2 {
Kolor tła: zielony;
}

[_nghost-serverApp-c228] .itsvse3 {
Kolor tła: czerwony;
}

.itsvse4 {
Kolor tła: akwamaryna;
}

.itsvse1 stylizuje tylko aktualny komponent, .itsvse2 i .itsvse3 wpływają na styl wprowadzonych komponentów potomnych, a .itsvse3 wpływa na styl globalny.

CSS ITSVSE1 może wpływać tylko na bieżący komponent, ponieważ wszystkie elementy bieżącego węzła dodają atrybut "_ngcontent-serverapp-c228", jak pokazano na poniższym rysunku:

(Koniec)

Mały śmiecie · Opublikowano 26.11.2021 17:07:00

Trzy sposoby wykorzystania enkapsulacji kątowej
https://www.itsvse.com/thread-9200-1-1.html

Logowanie jest widoczne.

[Angular] Angular serii 9 (VII) w stylu CSS

Powiązane wpisy

Oglądane sekcje