Angular 9-serie (VII) CSS-liknande teleskop

Lilla avskum · Publicerad på 2020-06-17 16:46:59

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

Parametrar för transmissionen av Angular 9 series (2) dynamiska komponenter
https://www.itsvse.com/thread-9245-1-1.html

Angular 9-serie (3) prenumererar på dynamiska komponenthändelser
https://www.itsvse.com/thread-9246-1-1.html

Angular 9-seriens (IV) specialrörledningar
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formaterar storleksvalutaformatet
https://www.itsvse.com/thread-9249-1-1.html

Vinkelrad 9 (VI) anropar inbyggda JS-variabler och metoder
https://www.itsvse.com/thread-9254-1-1.html

I efterhand försökte vi ändra stilen på den introducerade tredjepartskomponenten tidigare, men det lyckades inte.

Vinkelinställningskomponent CSS-stil har ingen effekt på lösningen
https://www.itsvse.com/thread-9184-1-1.html

:host representerar en selektor som väljer den aktuella komponenten.
::ng-deep kan ignorera de nästlade hierarkirelationerna för mellanklassNamn. Hitta direkt det klassnamn du vill ändra.
Den officiella dokumentationen säger dock att ng-deep kommer att överges i framtida versioner, och det är okänt vilken typ av syntax det kommer att bli i framtiden.

Egenskapen ovanpå komponenten kan sättas till styleUrls för att sätta css-stilmallen för den aktuella komponenten.

Den introducerade stilmallen påverkar endast det aktuella taggelementet och påverkar inte andra komponenter, vilket är en viktig funktion i Angular-ramverket.

CSS-kod:

Inloggningen är synlig.

Låt oss titta på den slutgiltiga genererade CSS-stilen via webbläsaren, som visas nedan:

.itsvse1[_ngcontent-serverApp-c228] {
bakgrundsfärg: azurblå;
}

[_nghost-serverApp-c228] .itsvse2 {
Bakgrundsfärg: grön;
}

[_nghost-serverApp-c228] .itsvse3 {
Bakgrundsfärg: röd;
}

.itsvse4 {
bakgrundsfärg: aqua;
}

.itsvse1 stylar endast den aktuella komponenten, .itsvse2 och .itsvse3 påverkar stilen på de introducerade barnkomponenterna, och .itsvse3 påverkar den globala stilen.

ITSVSE1 CSS kan endast påverka den aktuella komponenten eftersom alla nuvarande nodelement lägger till attributet "_ngcontent-serverapp-c228", som visas i figuren nedan:

(Slut)

Lilla avskum · Publicerad på 2021-11-26 17:07:00

Tre sätt att använda vinkelinkapsling
https://www.itsvse.com/thread-9200-1-1.html

Inloggningen är synlig.

[Kantig] Angular 9-serie (VII) CSS-liknande teleskop

Relaterade inlägg

Avsnitt som ses