Angular 9 sarjan (VII) CSS-tyylinen tähtäin

Pikku roisto · Julkaistu 17.6.2020 16.46.59

Angular 9 -sarja (1) Dynaamisesti kuormitetut komponentit
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 -sarjan (2) dynaamisen komponentin siirtoparametrin
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 -sarja (3) sisältää dynaamiset komponenttitapahtumat
https://www.itsvse.com/thread-9246-1-1.html

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

Angular 9 Series (V) muotoilee summan valuuttamuodon
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 -sarja (VI) kutsuu natiiveja JS-muuttujia ja metodeja
https://www.itsvse.com/thread-9254-1-1.html

Jälkikäteen ajatellen yritimme aiemmin muokata esiteltyä kolmannen osapuolen komponenttia, mutta se ei onnistunut.

Kulmaasetuskomponentti CSS-tyyli ei vaikuta ratkaisuun
https://www.itsvse.com/thread-9184-1-1.html

:host edustaa valitsijaa, joka valitsee nykyisen komponentin.
::ng-deep voi ohittaa väliluokan Name-luokan sisäkkäiset hierarkiasuhteet. Etsi suoraan luokannimi, jota haluat muuttaa.
Virallinen dokumentaatio kuitenkin sanoo, että ng-deep hylätään tulevissa versioissa, eikä ole tiedossa, millainen syntaksi siitä tulee tulevaisuudessa.

Komponentin päällä oleva ominaisuus voidaan asettaa styleUrls-muotoon, jotta nykyisen komponentin css-tyyliarkki voidaan asettaa.

Esitelty tyylilomake vaikuttaa vain nykyiseen tagielementtiin eikä muihin komponentteihin, mikä on tärkeä ominaisuus Angular-kehyksessä.

CSS-koodi:

Kirjautuminen näkyy.

Katsotaanpa lopullista generoitua CSS-tyyliä selaimen kautta, kuten alla on esitetty:

.itsvse1[_ngcontent-serverApp-c228] {
taustaväri: sininen;
}

[_nghost-serverApp-c228] .itsvse2 {
taustaväri: vihreä;
}

[_nghost-serverApp-c228] .itsvse3 {
taustaväri: punainen;
}

.itsvse4 {
Taustaväri: Aqua;
}

.itsvse1 tyylittelee vain nykyisen komponentin, .itsvse2 ja .itsvse3 vaikuttavat esiteltyjen lapsikomponenttien tyyliin, ja .itsvse3 vaikuttaa globaaliin tyyliin.

itsvse1 css voi vaikuttaa vain nykyiseen komponenttiin, koska kaikki nykyiset solmuelementit lisäävät "_ngcontent-serverapp-c228" -attribuutin, kuten alla olevassa kuvassa on esitetty:

(Loppu)

Pikku roisto · Julkaistu 26.11.2021 17.07.00

Kolme tapaa käyttää kulmakapselointia
https://www.itsvse.com/thread-9200-1-1.html

Kirjautuminen näkyy.

[Angular] Angular 9 sarjan (VII) CSS-tyylinen tähtäin

Aiheeseen liittyvät julkaisut

Katsotut osuudet