Angular 9 serija (VII) CSS-stil daljnogled

Mala drhal · Objavljeno na 17. 06. 2020 16:46:59

Angular 9 serija (1) Dinamično obremenjene komponente
https://www.itsvse.com/thread-9238-1-1.html

Dinamični parametri prenosa komponent serije Angular 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

Serija Angular 9 (3) podpira dinamične dogodke komponent
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 Series (IV) cevovodi po meri
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formatira format valute
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 serija (VI) kliče nativne JS spremenljivke in metode
https://www.itsvse.com/thread-9254-1-1.html

Z retrospektive smo že prej poskušali spremeniti slog uvedene komponente tretjih oseb, vendar nam ni uspelo.

Komponenta za kotno nastavitev v slogu CSS ne vpliva na rešitev
https://www.itsvse.com/thread-9184-1-1.html

:host predstavlja izbirnik, ki izbere trenutno komponento.
::ng-deep lahko ignorira ugnezdene hierarhične odnose vmesnega className. Neposredno poiščite ime razreda, ki ga želite spremeniti.
Vendar pa uradna dokumentacija pravi, da bo ng-deep v prihodnjih različicah opuščen, in ni znano, kakšna sintaksa bo v prihodnosti.

Lastnost nad komponento lahko nastavite na styleUrls za nastavitev css slogovnega lista trenutne komponente.

Uvedena slogovna lista vpliva le na trenutni element oznake in ne na druge komponente, kar je pomembna lastnost ogrodja Angular.

CSS koda:

Prijava je vidna.

Poglejmo si končni ustvarjeni CSS slog prek brskalnika, kot je prikazano spodaj:

.itsvse1[_ngcontent-serverApp-c228] {
Barva ozadja: azurna;
}

[_nghost-serverApp-c228] .itsvse2 {
Barva ozadja: zelena;
}

[_nghost-serverApp-c228] .itsvse3 {
Barva ozadja: rdeča;
}

.itsvse4 {
Barva ozadja: Aqua;
}

.itsvse1 stilizira le trenutno komponento, .itsvse2 in .itsvse3 vplivata na slog uvedenih podkomponent, .itsvse3 pa na globalni slog.

ITSVSE1 CSS lahko vpliva le na trenutno komponento, ker bodo vsi trenutni elementi vozlišča dodali atribut "_ngcontent-serverapp-c228", kot je prikazano na spodnji sliki:

(Konec)

Mala drhal · Objavljeno na 26. 11. 2021 17:07:00

Trije načini uporabe kotne kapsulacije
https://www.itsvse.com/thread-9200-1-1.html

Prijava je vidna.

[Angular] Angular 9 serija (VII) CSS-stil daljnogled

Sorodne objave

Ogledi odsekov