Explication détaillée de l'apprentissage angulaire sur l'utilisation de la liaison de style (ngClass et ngStyle)

Scénario de projet :

Dans le développement front-end, nous rencontrons souvent une telle situation : différentes pages partageront le même morceau de code, et en même temps, nous devons utiliser les informations spécifiques de la page ou une certaine opération (comme cliquer sur un certain bouton) pour décider d'afficher ce code ou d'apporter certaines modifications au style de la page. À ce stade, la liaison de style dans notre angulaire est utilisée !

---

Description du problème

Par exemple : deux pages du site Web doivent utiliser le même morceau de code. L'écrire deux fois n'est pas conforme au principe sec (ne vous répétez pas) et est également très inefficace. , donc l'entreprise angulaire Cela ne se fait généralement pas dans les projets de développement front-end. Si un jour votre leader vous dit : zzz, s'il vous plaît changez le code Avec cette invite, je veux cet effet sur cette page et cet effet sur une autre page. Que devez-vous faire ? Vous trouverez ci-dessous un exemple simple pour illustrer. [Recommandations du didacticiel associé : "Tutoriel angulaire"]

Extraits de code courants (avant modification) :

<div class="normalTxt">      
	<span >I love angular</span>         
</div>

---

Analyse des causes :

La liaison de style dans angulaire peut répondre aux exigences ci-dessus, angulaire a deux styles instructions de liaison : [ngStyle], [ngClass]
Remarque : elles doivent être placées entre [ ] crochets lors de l'utilisation !

1.[ngStyle]

<any [ngStyle]=“obj”>

Instructions :

• Le type de balise représente la liaison de style peut être de n’importe quel type, tel que div, p, span, etc.
• Insérez un morceau de code ici. La valeur liée par ngStyle doit être un objet.
• L'attribut de l'objet est le nom du style CSS et la valeur de l'objet est le style spécifique.

Utilisation simple (fichier html) :

//将这段div的背景色改为绿色
<div [ngStyle]="{&#39;background-color&#39;:&#39;green&#39;}">
xxxx
</div>

Utilisation complexe (fichier html) :

//如果当前页面为主页则将背景色改为绿色，否则改为红色
<div [ngStyle]="{&#39;background-color&#39;:pageName== &#39;homepage&#39; ? &#39;green&#39; : &#39;red&#39; }">
xxxx
</div>

2.[ngClass]

<any [ngClass]=“obj”>

Description :

• tout type de balise représentant la liaison de style peut être de n'importe quel type, tel que comme div, p, span, etc.
• La valeur liée à ngClass doit être un objet.
• L'attribut de l'objet est le nom de la classe, et la valeur de l'attribut est de type booléen et le résultat ne peut être que vrai/faux. Si c'est vrai, la classe apparaîtra, sinon la classe n'apparaîtra pas.

Utilisation simple (fichier html) :

//使用.homepageText样式
<div [ngClass]="{&#39;homepageText&#39;:true}">
xxxx
</div>

Utilisation complexe (fichier html) :

//当页面名称是homepage时使用.homepageText样式，否则不使用
<div [ngClass]="{&#39;homepageText&#39;:pageName ==&#39;homepage&#39;}">
xxxx
</div>

(fichier css) :

.homepageText {    
font-size: 14px;
font-weight: bold;
}

---

Solution :

Ce qui suit est la solution au problème du début , j'espère donner S'il vous plaît apporter un peu d'inspiration

Extrait de code commun (après modification) :

<div [ngClass]="{&#39;normalTxt&#39;:pageTitle==&#39;portal&#39; ,&#39;specialTxt&#39;:pageTitle==&#39;detail&#39;}">   
   <span>I love angular</span>         
</div>

Explication : La page du portail veut montrer l'effet de normalTxt, et la page de détail veut montrer l'effet de specialTxt. Les styles spécifiques de normalTxt et specialTxt doivent être ajoutés dans les fichiers .css/.scss correspondants.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!