Luneta de tip CSS din seria Angular 9 (VII)

Mică mizerie · Postat pe 17.06.2020 16:46:59

Componentele Încarcate Dinamic din Seria Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Parametrii de transmisie a componentelor dinamice din seria Angular 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

Seria Angular 9 (3) aderă la evenimentele componente dinamice
https://www.itsvse.com/thread-9246-1-1.html

Conducte personalizate Angular 9 Series (IV)
https://www.itsvse.com/thread-9248-1-1.html

Seria Angular 9 (V) formatează moneda sumei
https://www.itsvse.com/thread-9249-1-1.html

Seria Angular 9 (VI) apelează variabile și metode JS native
https://www.itsvse.com/thread-9254-1-1.html

Privind în urmă, am încercat să modificăm stilul componentei terțe introduse anterior, dar nu a avut succes.

Componenta de setare unghiulară în stilul CSS nu are efect
https://www.itsvse.com/thread-9184-1-1.html

:host reprezintă un selector care selectează componenta curentă.
::ng-deep poate ignora relațiile ierarhice imbricate ale claseiNume intermediar. Găsește direct numele clasei pe care vrei să-l modifici.
Totuși, documentația oficială spune că ng-deep va fi abandonat în versiunile viitoare și nu se știe ce fel de sintaxă va deveni în viitor.

Proprietatea de deasupra componentei poate fi setată pe styleUrls pentru a seta foaia de stil css a componentei curente.

Foia de stil introdusă afectează doar elementul curent al etichetei și nu afectează alte componente, ceea ce este o caracteristică importantă a cadrului Angular.

Cod CSS:

Autentificarea este vizibilă.

Să analizăm stilul CSS generat final prin browser, așa cum se arată mai jos:

.itsvse1[_ngcontent-serverApp-c228] {
culoare de fundal: azur;
}

[_nghost-serverApp-c228] .itsvse2 {
culoare de fundal: verde;
}

[_nghost-serverApp-c228] .itsvse3 {
culoare de fundal: roșu;
}

.itsvse4 {
culoare de fundal: aqua;
}

.itsvse1 stilizează doar componenta curentă, .itsvse2 și .itsvse3 influențează stilul componentelor copil introduse, iar .itsvse3 afectează stilul global.

ITSVse1 CSS poate afecta doar componenta curentă deoarece toate elementele curente ale nodului vor adăuga atributul "_ngcontent-serverapp-c228", așa cum este ilustrat în figura de mai jos:

(Sfârșit)

Mică mizerie · Postat pe 26.11.2021 17:07:00

Trei moduri de a folosi încapsularea unghiulară
https://www.itsvse.com/thread-9200-1-1.html

Autentificarea este vizibilă.

[Unghiular] Luneta de tip CSS din seria Angular 9 (VII)

Postări conexe

Secțiuni vizualizate