Angular 9-serie (VII) CSS-stijl scope

Klein tuig · Geplaatst op 17-06-2020 16:46:59

Angular 9 Series (1) Dynamisch Geladen Componenten
https://www.itsvse.com/thread-9238-1-1.html

Hoekige 9-serie (2) dynamische componenttransmissieparameters
https://www.itsvse.com/thread-9245-1-1.html

Hoekige 9-serie (3) sluit dynamische componentgebeurtenissen aan
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 Series (IV) Custom Pipe pijpleidingen
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formateert het bedragsvalutaformaat
https://www.itsvse.com/thread-9249-1-1.html

Hoekige 9-reeks (VI) roept native JS-variabelen en -methoden aan
https://www.itsvse.com/thread-9254-1-1.html

Achteraf gezien hebben we eerder geprobeerd de stijl van het geïntroduceerde derde partij-onderdeel aan te passen, maar dat was niet succesvol.

Hoekige instelling component CSS-stijl heeft geen effect op oplossing
https://www.itsvse.com/thread-9184-1-1.html

:host vertegenwoordigt een selector die de huidige component selecteert.
::ng-deep kan de geneste hiërarchierelaties van de tussenklasse Naam negeren. Zoek direct de className die je wilt aanpassen.
De officiële documentatie zegt echter dat ng-deep in toekomstige versies zal worden verlaten, en het is onbekend wat voor soort syntax het in de toekomst zal worden.

De eigenschap bovenop de component kan worden ingesteld op styleUrls om het css-stylesheet van de huidige component in te stellen.

De geïntroduceerde stylesheet beïnvloedt alleen het huidige tagelement en geen andere componenten, wat een belangrijk kenmerk is van het Angular-framework.

CSS-code:

Inloggen is zichtbaar.

Laten we de uiteindelijke gegenereerde CSS-stijl bekijken via de browser, zoals hieronder weergegeven:

.itsvse1[_ngcontent-serverApp-c228] {
achtergrondkleur: azuur;
}

[_nghost-serverApp-c228] .itsvse2 {
Achtergrondkleur: groen;
}

[_nghost-serverApp-c228] .itsvse3 {
achtergrondkleur: rood;
}

.itsvse4 {
Achtergrondkleur: Aqua;
}

.itsvse1 stijlt alleen de huidige component, .itsvse2 en .itsvse3 beïnvloeden de stijl van de geïntroduceerde kindcomponenten, en .itsvse3 beïnvloedt de globale stijl.

ITSVSE1 CSS kan alleen de huidige component beïnvloeden omdat alle huidige node-elementen het attribuut "_ngcontent-serverapp-c228" toevoegen, zoals weergegeven in de onderstaande figuur:

(Einde)

Klein tuig · Geplaatst op 26-11-2021 17:07:00

Drie manieren om hoekencapsulatie te gebruiken
https://www.itsvse.com/thread-9200-1-1.html

Inloggen is zichtbaar.

[Angular] Angular 9-serie (VII) CSS-stijl scope

Gerelateerde berichten

Secties bekeken