Angular 9 series (VII) v štýle CSS

Malý · Zverejnené 17. 6. 2020 16:46:59

Dynamicky zaťažené komponenty série Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Dynamické prenosové parametre pre sériu Angular 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

Séria Angular 9 (3) podporuje dynamické komponentové udalosti
https://www.itsvse.com/thread-9246-1-1.html

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

Angular 9 Series (V) formátuje formát sumy meny
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 series (VI) volá natívne JS premenné a metódy
https://www.itsvse.com/thread-9254-1-1.html

S odstupom času sme sa už pokúsili upraviť štýl zavedenej tretej strany, ale nebolo to úspešné.

Komponent s uhlovým nastavením v štýle CSS nemá účinok riešenia
https://www.itsvse.com/thread-9184-1-1.html

:host predstavuje selektor, ktorý vyberá aktuálnu komponentu.
::ng-deep môže ignorovať vnorené hierarchické vzťahy strednej triedyName. Priamo nájdite názov triedy, ktorý chcete upraviť.
Oficiálna dokumentácia však uvádza, že ng-deep bude v budúcich verziách opustený a nie je známe, aká syntax sa v budúcnosti stane.

Vlastnosť nad komponentom je možné nastaviť na styleUrls na nastavenie css štýlu aktuálnej komponenty.

Zavedený štýl ovplyvňuje iba aktuálny tag prvok a neovplyvňuje ostatné komponenty, čo je dôležitá vlastnosť frameworku Angular.

CSS kód:

Prihlásenie je viditeľné.

Pozrime sa na finálny generovaný CSS štýl cez prehliadač, ako je uvedené nižšie:

.itsvse1[_ngcontent-serverApp-c228] {
farba pozadia: azúrová;
}

[_nghost-serverApp-c228] .itsvse2 {
Farba pozadia: zelená;
}

[_nghost-serverApp-c228] .itsvse3 {
Farba pozadia: červená;
}

.itsvse4 {
Farba pozadia: aqua;
}

.itsvse1 štýluje iba aktuálnu komponentu, .itsvse2 a .itsvse3 ovplyvňujú štýl zavedených podkomponentov a .itsvse3 ovplyvňuje globálny štýl.

ITSVSE1 CSS môže ovplyvniť len aktuálnu komponentu, pretože všetky aktuálne prvky uzla pridajú atribút "_ngcontent-serverapp-c228", ako je znázornené na obrázku nižšie:

(Koniec)

Malý · Zverejnené 26. 11. 2021 17:07:00

Tri spôsoby použitia uhlového zapuzdrenia
https://www.itsvse.com/thread-9200-1-1.html

Prihlásenie je viditeľné.

[Angular] Angular 9 series (VII) v štýle CSS

Súvisiace príspevky

Zobrazené sekcie