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

青灯夜游
Lepaskan: 2022-12-07 19:03:46
ke hadapan
2601 orang telah melayarinya

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>
Salin selepas log masuk

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”>
Salin selepas log masuk

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>
Salin selepas log masuk

Penggunaan kompleks (fail html):

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

2.[ngClass]

<any [ngClass]=“obj”>
Salin selepas log masuk

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>
Salin selepas log masuk

Penggunaan kompleks (fail html):

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

(fail css):

< . >
.homepageText {    
font-size: 14px;
font-weight: bold;
}
Salin selepas log masuk
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!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan