การสลับด้วย @switch
เลือกเทมเพลตด้วย @switch และ @case
การสลับด้วย @switch เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสลับด้วย switch
บล็อก at-switch เลือกหนึ่งแขนงจากหลายแขนงโดยอิงตามค่า คล้ายคำสั่ง switch โดยใช้ร่วมกับ at-case และ at-default
ไวยากรณ์ switch พื้นฐาน
เขียน at-switch โดยใส่นิพจน์ไว้ในวงเล็บ จากนั้นเขียนบล็อก at-case อย่างน้อยหนึ่งบล็อก โดยแต่ละบล็อกต้องมีค่าที่ใช้จับคู่
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }บล็อก case
แต่ละ at-case รับค่าไว้ในวงเล็บ ระบบจะแสดงผล case แรกที่มีค่าเท่ากับนิพจน์ switch อย่างเคร่งครัด
บล็อก default
บล็อก at-default จะแสดงผลเมื่อไม่มี case ใดตรงกัน บล็อกนี้ไม่จำเป็น แต่แนะนำให้ใช้เพื่อให้ครอบคลุม
ความเท่ากันแบบเคร่งครัด
การจับคู่ใช้ความเท่ากันแบบเคร่งครัด (===) ตรวจสอบให้แน่ใจว่าค่าของ case มีชนิดเดียวกับนิพจน์ switch
การสลับด้วยสัญญาณ
นิพจน์ switch สามารถเป็นการเรียกสัญญาณได้ ดังนั้นมุมมองจะแสดงผลใหม่เมื่อสัญญาณเปลี่ยนแปลง
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }การแทนที่ ngSwitch
สิ่งนี้มาแทนการใช้คำสั่ง ngSwitch, star-ngSwitchCase และ star-ngSwitchDefault แบบเดิมร่วมกัน ด้วยไวยากรณ์ที่สะอาดกว่าและไม่ต้องนำเข้า
แสดงผลเพียงแขนงเดียว
At-switch จะแสดงผลแขนงที่ตรงกันเพียงหนึ่งแขนงเท่านั้น (หรือแขนงเริ่มต้น) แขนงอื่นจะไม่ปรากฏอยู่ใน DOM เลย
ค่าชนิดแจกแจงและค่าคงที่
สามารถเปรียบเทียบ case กับสมาชิกของค่าชนิดแจกแจงหรือค่าคงที่ที่เปิดเผยโดยคอมโพเนนต์ได้ ซึ่งช่วยให้อ่านง่ายและปลอดภัยด้านชนิดมากขึ้น
การซ้อนภายใน switch
แต่ละบล็อก case สามารถมีเนื้อหาแม่แบบใดก็ได้ รวมถึงบล็อกโฟลว์ควบคุมอื่น ๆ เช่น at-if และ at-for
ควรใช้ switch เมื่อใด
ควรเลือกใช้ at-switch แทนสายโซ่ at-if / at-else if ที่ยาว เมื่อจำเป็นต้องแยกแขนงจากค่าเดียวซึ่งมีกรณีเฉพาะหลายกรณี
ตรวจสอบอย่างรวดเร็ว: switch
เนื้อหาสำรองของบล็อก switch
สรุป: การสลับ
คุณได้เรียนรู้บล็อก at-switch พร้อมแขนง at-case ที่จับคู่ด้วยความเท่ากันแบบเคร่งครัด และ at-default ซึ่งเป็นเนื้อหาสำรองที่เลือกใช้ได้ บล็อกนี้มาแทน ngSwitch และแสดงผลเพียงหนึ่งแขนง ขั้นถัดไป: การโหลดแบบเลื่อนเวลาโดยใช้ at-defer
คำถามที่พบบ่อย
บทเรียน “การสลับด้วย @switch” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสลับด้วย @switch” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสลับด้วย @switch”
เลือกเทมเพลตด้วย @switch และ @case คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การสลับด้วย @switch” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ