Penjelasan terperinci pembelajaran sudut tentang penggunaan gaya mengikat (ngClass dan ngStyle)

Senario projek:

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 !

---

Penerangan Masalah

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>

---

Analisis sebab:

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:

• sebarang menunjukkan bahawa jenis teg pengikatan gaya boleh menjadi sebarang jenis, seperti div, p, span, dsb.
• Sisipkan sekeping kod di sini Nilai yang diikat oleh ngStyle mestilah objek.
• Atribut objek ialah nama gaya css dan nilai objek ialah gaya khusus.

Penggunaan mudah (fail html):

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

Penggunaan kompleks (fail html):

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

2.[ngClass]

<any [ngClass]=“obj”>

Nota:

• sebarang mewakili jenis teg pengikatan gaya, yang boleh menjadi sebarang jenis, seperti div, p, span, dsb.
• Nilai yang diikat oleh ngClass mestilah objek.
• Atribut objek ialah nama kelas, dan nilai atribut ialah jenis boolean dan hasilnya hanya boleh benar/salah Jika benar, kelas akan muncul, jika tidak kelas tidak akan muncul.

Penggunaan mudah (fail html):

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

Penggunaan kompleks (fail html):

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

(fail css):

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

Coretan kod biasa (selepas pengubahsuaian):

---

Penjelasan: Halaman portal mahu menunjukkan kesan normalTxt dan halaman butiran mahu menunjukkan kesan specialTxt. Gaya khusus normalTxt dan specialTxt perlu ditambah dalam fail .css/.scss yang sepadan.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

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!