Cannaletico in stile CSS della serie Angular 9 (VII)

Piccola feccia · Pubblicato su 17/06/2020 16:46:59

Componenti dinamici a carica dinamica della serie Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Parametri di trasmissione dinamici dei componenti della serie Angular 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

La serie Angular 9 (3) si abscrive agli eventi dinamici a componente
https://www.itsvse.com/thread-9246-1-1.html

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

Serie Angular 9 (V) formata il formato di valuta di quantità
https://www.itsvse.com/thread-9249-1-1.html

La serie angolare 9 (VI) chiama variabili e metodi JS nativi
https://www.itsvse.com/thread-9254-1-1.html

Col senno di poi, abbiamo provato a modificare lo stile del componente di terze parti introdotto, ma senza successo.

Lo stile CSS del componente di impostazione angolare non prende effetto
https://www.itsvse.com/thread-9184-1-1.html

:host rappresenta un selettore che seleziona il componente corrente.
::ng-deep può ignorare le relazioni gerarchiche annidate della classe intermediaName. Trova direttamente il nome della classe che vuoi modificare.
Tuttavia, la documentazione ufficiale afferma che ng-deep sarà abbandonato nelle versioni future, e non si sa che tipo di sintassi diventerà in futuro.

La proprietà sopra il componente può essere impostata su styleUrls per impostare il foglio di stile css del componente corrente.

Il foglio di stile introdotto riguarda solo l'elemento del tag corrente e non influisce sugli altri componenti, che è una caratteristica importante del framework Angular.

Codice CSS:

L'accesso è visibile.

Diamo un'occhiata allo stile CSS generato dal browser, come mostrato di seguito:

.itsvse1[_ngcontent-serverApp-c228] {
Colore di sfondo: Azzurro;
}

[_nghost-serverApp-c228] .itsvse2 {
colore di sfondo: verde;
}

[_nghost-serverApp-c228] .itsvse3 {
colore di sfondo: rosso;
}

.itsvse4 {
Colore di sfondo: Acqua;
}

.itsvse1 stilizza solo il componente corrente, .itsvse2 e .itsvse3 influenzano lo stile dei componenti figli introdotti, e .itsvse3 influisce sullo stile globale.

ITSVse1 CSS può influenzare solo il componente corrente perché tutti gli elementi attuali del nodo aggiungeranno l'attributo "_ngcontent-serverapp-c228", come mostrato nella figura sottostante:

(Fine)

Piccola feccia · Pubblicato su 26/11/2021 17:07:00

Tre modi per utilizzare l'incapsulamento angolare
https://www.itsvse.com/thread-9200-1-1.html

L'accesso è visibile.

[Angolare] Cannaletico in stile CSS della serie Angular 9 (VII)

Post correlati

Sezioni visualizzate