Maison >interface Web >js tutoriel >Explication détaillée de l'apprentissage angulaire sur l'utilisation de la liaison de style (ngClass et ngStyle)
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 !
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>
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 :
Utilisation simple (fichier html) :
//将这段div的背景色改为绿色 <div [ngStyle]="{'background-color':'green'}"> xxxx </div>
Utilisation complexe (fichier html) :
//如果当前页面为主页则将背景色改为绿色,否则改为红色 <div [ngStyle]="{'background-color':pageName== 'homepage' ? 'green' : 'red' }"> xxxx </div>
2.[ngClass]
<any [ngClass]=“obj”>
Description :
Utilisation simple (fichier html) :
//使用.homepageText样式 <div [ngClass]="{'homepageText':true}"> xxxx </div>
Utilisation complexe (fichier html) :
//当页面名称是homepage时使用.homepageText样式,否则不使用 <div [ngClass]="{'homepageText':pageName =='homepage'}"> xxxx </div>
(fichier css) :
.homepageText { font-size: 14px; font-weight: bold; }
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) :
f4d511afc8efca1bd60a437c643cdd97 45a2772a6b6107b401db3c9b82c049c2I love angular54bdf357c58b8a65c66d7c19c8e4d114 16b28748ea4df4d9c2150843fecfba68
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!