Angular 9-serie (VII) CSS-lignende sigtemod

Lille skarn · Opslået på 17/06/2020 16.46.59

Angular 9 serie (1) dynamisk belastede komponenter
https://www.itsvse.com/thread-9238-1-1.html

Parametre for vinkel 9-serie (2) dynamiske komponenttransmissionsparametre
https://www.itsvse.com/thread-9245-1-1.html

Angular 9-serie (3) abonnerer på dynamiske komponentbegivenheder
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 Series (IV) specialrørledninger
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formaterer beløbsvalutaformatet
https://www.itsvse.com/thread-9249-1-1.html

Angular 9-serie (VI) kalder native JS-variabler og -metoder
https://www.itsvse.com/thread-9254-1-1.html

Set i bakspejlet forsøgte vi tidligere at ændre stilen på den introducerede tredjepartskomponent, men det lykkedes ikke.

Vinkelindstillingskomponent CSS-stil har ikke effekt løsning
https://www.itsvse.com/thread-9184-1-1.html

:host repræsenterer en selector, der vælger den aktuelle komponent.
::ng-deep kan ignorere de indlejrede hierarkirelationer for den mellemliggende klasseNavn. Find direkte det klassenavn, du vil ændre.
Dog siger den officielle dokumentation, at ng-deep vil blive opgivet i fremtidige versioner, og det er ukendt, hvilken slags syntaks det vil blive i fremtiden.

Egenskaben oven på komponenten kan sættes til styleUrls for at sætte css-stylesheetet for den aktuelle komponent.

Det introducerede stylesheet påvirker kun det aktuelle tag-element og påvirker ikke andre komponenter, hvilket er en vigtig funktion ved Angular-frameworket.

CSS-kode:

Login er synlig.

Lad os se på den endelige genererede CSS-stil gennem browseren, som vist nedenfor:

.itsvse1[_ngcontent-serverApp-c228] {
baggrundsfarve: azurblå;
}

[_nghost-serverApp-c228] .itsvse2 {
baggrundsfarve: grøn;
}

[_nghost-serverApp-c228] .itsvse3 {
baggrundsfarve: rød;
}

.itsvse4 {
baggrundsfarve: aqua;
}

.itsvse1 styler kun den aktuelle komponent, .itsvse2 og .itsvse3 påvirker stilen på de introducerede underkomponenter, og .itsvse3 påvirker den globale stil.

ITSVSE1 CSS kan kun påvirke den aktuelle komponent, fordi alle nuværende nodeelementer vil tilføje attributten "_ngcontent-serverapp-c228", som vist i figuren nedenfor:

(Slut)

Lille skarn · Opslået på 26/11/2021 17.07.00

Tre måder at bruge vinkelindkapsling på
https://www.itsvse.com/thread-9200-1-1.html

Login er synlig.

[Kantet] Angular 9-serie (VII) CSS-lignende sigtemod

Relaterede indlæg

Afsnit set