Cet article est un article miroir de traduction automatique, veuillez cliquer ici pour accéder à l’article original.

Architect_Programmer_Code Réseau agricole»Architecte › Conception front-end & web › Cadre frontal › Lunette CSS de type CSS de la série Angular 9 (VII)
Vue: 9238|Répondre: 1

[Angulaire] Lunette CSS de type CSS de la série Angular 9 (VII)

[Copié le lien]
Publié sur 17/06/2020 16:46:59 | | | |
Composants dynamiquement chargés de la série Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Paramètres de transmission dynamique des composants de la série angulaire 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

La série Angular 9 (3) s’inscrit aux événements dynamiques à composants
https://www.itsvse.com/thread-9246-1-1.html

Canalisations personnalisées Angular 9 Series (IV)
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formate le format de la monnaie de la quantité
https://www.itsvse.com/thread-9249-1-1.html

La série angulaire 9 (VI) appelle des variables et méthodes JS natives
https://www.itsvse.com/thread-9254-1-1.html
Avec le recul, nous avons essayé de modifier le style du composant tiers introduit auparavant, mais cela a échoué.

Le style CSS de composante de réglage angulaire ne prend pas de solution
https://www.itsvse.com/thread-9184-1-1.html
:host représente un sélecteur qui sélectionne la composante courante.
::ng-deep peut ignorer les relations hiérarchiques imbriquées du className intermédiaire. Trouvez directement le nom de la classe que vous souhaitez modifier.
Cependant, la documentation officielle indique que ng-deep sera abandonné dans les versions futures, et on ignore quel type de syntaxe il deviendra à l’avenir.

La propriété au-dessus du composant peut être définie sur styleUrls pour définir la feuille de style css du composant actuel.

La feuille de style introduite n’affecte que l’élément de tag courant et n’affecte pas les autres composants, ce qui est une caractéristique importante du cadre Angular.


Code CSS :

Voyons le style CSS généré par le navigateur, comme montré ci-dessous :



.itsvse1[_ngcontent-serverApp-c228] {
    Couleur de fond : Azur ;
}

[_nghost-serverApp-c228] .itsvse2 {
    Couleur de fond : vert ;
}

[_nghost-serverApp-c228] .itsvse3 {
    Couleur de fond : Rouge ;
}

  .itsvse4 {
    Couleur de fond : Aqua ;
}
.itsvse1 ne stylise que le composant courant, .itsvse2 et .itsvse3 influencent le style des composants enfants introduits, et .itsvse3 affecte le style global.

Le CSS ITSVSE1 ne peut affecter que le composant courant car tous les éléments actuels du nœud ajouteront l’attribut « _ngcontent-serverapp-c228 », comme montré dans la figure ci-dessous :



(Fin)




Précédent:Retrouvez le lien vidéo de la 17e édition de l’atelier Marco Linux Advanced Cloud Computing Operations
Prochain:La différence entre « != » et « <> » dans les instructions SQL

Articles connexes
 Propriétaire| Publié sur 26/11/2021 17:07:00 |
Trois façons d’utiliser l’encapsulation angulaire
https://www.itsvse.com/thread-9200-1-1.html

Démenti:
Tous les logiciels, supports de programmation ou articles publiés par Code Farmer Network sont uniquement destinés à l’apprentissage et à la recherche ; Le contenu ci-dessus ne doit pas être utilisé à des fins commerciales ou illégales, sinon les utilisateurs assumeront toutes les conséquences. Les informations sur ce site proviennent d’Internet, et les litiges de droits d’auteur n’ont rien à voir avec ce site. Vous devez supprimer complètement le contenu ci-dessus de votre ordinateur dans les 24 heures suivant le téléchargement. Si vous aimez le programme, merci de soutenir un logiciel authentique, d’acheter l’immatriculation et d’obtenir de meilleurs services authentiques. En cas d’infraction, veuillez nous contacter par e-mail.
Mail To:help@itsvse.com