Dalam pembangunan bahagian hadapan, kita sering menghadapi situasi sedemikian: halaman berbeza dikongsi Sekeping kod yang sama, dan kami perlu memutuskan sama ada untuk memaparkan kod ini atau membuat perubahan tertentu pada gaya halaman berdasarkan maklumat khusus halaman atau operasi tertentu (seperti mengklik butang pada masa ini, kami gunakan). Gaya sudut mengikat dalam !
Contohnya: dua halaman tapak web perlu menggunakan sekeping kod yang sama tidak konsisten dengan prinsip kering (jangan ulangi sendiri), kecekapannya juga sangat rendah, jadi ini biasanya tidak dilakukan dalam projek pembangunan bahagian hadapan Angular dalam syarikat. Jika suatu hari pemimpin anda memberitahu anda: zzz, sila tukar kod Dengan gesaan ini, saya mahu kesan ini pada halaman ini dan kesan itu pada halaman lain. Di bawah adalah contoh mudah untuk digambarkan. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]
Coretan kod biasa (sebelum pengubahsuaian):
<div class="normalTxt"> <span >I love angular</span> </div>
Ikatan gaya dalam sudut boleh mencapai keperluan di atas Sudut mempunyai dua arahan pengikatan gaya: [ngStyle], [ngClass]
Nota. : Mereka mesti disertakan dalam [ ] kurungan segi empat sama apabila menggunakan
1.[ngStyle]
<any [ngStyle]=“obj”>
Arahan:
Penggunaan mudah (fail html):
//将这段div的背景色改为绿色 <div [ngStyle]="{'background-color':'green'}"> xxxx </div>
Penggunaan kompleks (fail html):
//如果当前页面为主页则将背景色改为绿色,否则改为红色 <div [ngStyle]="{'background-color':pageName== 'homepage' ? 'green' : 'red' }"> xxxx </div>
2.[ngClass]
<any [ngClass]=“obj”>
Nota:
Penggunaan mudah (fail html):
//使用.homepageText样式 <div [ngClass]="{'homepageText':true}"> xxxx </div>
Penggunaan kompleks (fail html):
//当页面名称是homepage时使用.homepageText样式,否则不使用 <div [ngClass]="{'homepageText':pageName =='homepage'}"> xxxx </div>
(fail css):
< . >.homepageText { font-size: 14px; font-weight: bold; }
Pengenalan kepada Pengaturcaraan! !
Atas ialah kandungan terperinci Penjelasan terperinci pembelajaran sudut tentang penggunaan gaya mengikat (ngClass dan ngStyle). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!