คลาสและสไตล์แบบไดนามิก
ผูกคลาสและสไตล์แบบรีแอกทีฟ
คลาสและสไตล์แบบไดนามิก เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การกำหนดสไตล์แบบไดนามิกในแม่แบบ
Angular ช่วยให้คุณผูกคลาสและสไตล์อินไลน์กับสถานะของคอมโพเนนต์ได้ ดังนั้นส่วนติดต่อผู้ใช้จะอัปเดตโดยอัตโนมัติเมื่อข้อมูลเปลี่ยนแปลง
การผูกคลาสเดียว
ใช้ [class.name] เพื่อสลับคลาส CSS หนึ่งคลาสตามนิพจน์บูลีน
<div [class.active]="isActive">Item</div>
// component
isActive = true;หลายคลาสด้วย ngClass
ngClass ใช้หลายคลาสพร้อมกัน โดยใช้ออบเจ็กต์ที่จับคู่ชื่อคลาสกับค่าบูลีน
<div [ngClass]="{ active: isActive, disabled: isDisabled }">
Item
</div>ngClass กับอาร์เรย์และสตริง
ngClass ยังรับสตริงของชื่อคลาสหรืออาร์เรย์ได้ด้วย
<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>การผูกสไตล์เดียว
ใช้ [style.property] เพื่อผูกพร็อพเพอร์ตี CSS อินไลน์หนึ่งรายการกับค่า
<p [style.color]="textColor">Hello</p>
// component
textColor = "tomato";การผูกสไตล์พร้อมหน่วย
เติมส่วนต่อท้ายที่เป็นหน่วยเพื่อผูกค่าตัวเลขเข้ากับหน่วย เช่น พิกเซลหรือเปอร์เซ็นต์
<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>
// component
boxWidth = 200;
boxHeight = 50;หลายสไตล์ด้วย ngStyle
ngStyle ตั้งค่าสไตล์อินไลน์หลายรายการพร้อมกันจากออบเจ็กต์
<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
Styled
</div>การผูกคลาสมีผลเมื่อเกิดความขัดแย้ง
เมื่อคลาสแบบคงที่และคลาสที่ผูกไว้ซ้ำกัน Angular จะรวมคลาสเหล่านั้นเข้าด้วยกัน การผูกจะควบคุมว่าคลาสแบบไดนามิกจะมีอยู่หรือไม่ โดยไม่ลบคลาสแบบคงที่
<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->การตอบสนองต่อสถานะ
การผูกจะประเมินใหม่ระหว่างการตรวจจับการเปลี่ยนแปลง ดังนั้นเมื่ออัปเดตพร็อพเพอร์ตีของคอมโพเนนต์ องค์ประกอบจะได้รับการกำหนดสไตล์ใหม่ทันที
toggle() {
this.isActive = !this.isActive;
}การเลือกใช้คลาสหรือสไตล์
ควรใช้การผูกคลาสร่วมกับกฎ CSS เพื่อให้ดูแลรักษาได้ง่าย และใช้การผูกสไตล์โดยตรงกับค่าที่เปลี่ยนแปลงแบบไดนามิกจริง ๆ เช่น ความกว้างหรือสีที่คำนวณแล้ว
การใช้ร่วมกับ Signals
การผูกคลาสและสไตล์ทำงานร่วมกับ Signals ได้เช่นกัน เพียงเรียกใช้ Signal ในนิพจน์ของแม่แบบ
<div [class.active]="isActive()"></div>
// component
isActive = signal(true);ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจของคุณเกี่ยวกับคลาสและสไตล์แบบไดนามิก
สรุปทบทวน
สลับคลาสหนึ่งคลาสด้วย [class.name] หรือหลายคลาสด้วย ngClass ตั้งค่าสไตล์หนึ่งรายการด้วย [style.prop] (พร้อมหน่วยที่เลือกได้) หรือหลายรายการด้วย ngStyle การผูกจะตอบสนองต่อสถานะ รวมถึง Signals โดยอัตโนมัติ
คำถามที่พบบ่อย
บทเรียน “คลาสและสไตล์แบบไดนามิก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “คลาสและสไตล์แบบไดนามิก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “คลาสและสไตล์แบบไดนามิก”
ผูกคลาสและสไตล์แบบรีแอกทีฟ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “คลาสและสไตล์แบบไดนามิก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สไตล์ที่จำกัดขอบเขตอยู่ในคอมโพเนนต์
- โหมดการห่อหุ้มมุมมอง
- การกำหนดสไตล์ Host และ Host-Context
- คลาสและสไตล์แบบไดนามิก