Pemilihan dengan @switch
Pilih template dengan @switch dan @case.
Pemilihan dengan @switch adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Pergantian dengan switch
Blok at-switch memilih satu cabang dari beberapa cabang berdasarkan suatu nilai, seperti pernyataan switch. Blok ini dipasangkan dengan at-case dan at-default.
Sintaks Dasar switch
Tulis at-switch dengan expression di dalam tanda kurung, lalu satu atau beberapa blok at-case, masing-masing dengan nilai yang cocok.
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }Blok case
Setiap at-case menerima nilai dalam tanda kurung. Case pertama yang nilainya sama persis dengan expression switch akan dirender.
Blok default
Blok at-default dirender ketika tidak ada case yang cocok. Blok ini bersifat opsional, tetapi disarankan agar penanganannya lengkap.
Kesamaan Ketat
Pencocokan menggunakan kesamaan ketat (===). Pastikan nilai case memiliki tipe yang sama dengan expression switch.
Beralih Berdasarkan Signal
Expression switch dapat berupa pemanggilan signal, sehingga tampilan diperbarui saat signal berubah.
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }Menggantikan ngSwitch
Ini menggantikan gabungan direktif lama ngSwitch, star-ngSwitchCase, dan star-ngSwitchDefault, dengan sintaks yang lebih bersih dan tanpa impor.
Hanya Satu Cabang yang Dirender
At-switch merender tepat satu cabang yang cocok (atau cabang default). Cabang lainnya sama sekali tidak ada di DOM.
Enum dan Konstanta
Case dapat membandingkan nilai dengan anggota enum atau konstanta yang diekspos pada komponen, sehingga meningkatkan keterbacaan dan keamanan tipe.
Penyarangan di Dalam switch
Setiap blok case dapat berisi konten template apa pun, termasuk blok alur kontrol lain seperti at-if dan at-for.
Kapan Menggunakan switch
Utamakan at-switch daripada rangkaian at-if / at-else if yang panjang ketika percabangan didasarkan pada satu nilai dengan beberapa case diskret.
Pemeriksaan Cepat: switch
Cadangan blok switch.
Ringkasan: Pergantian
Anda telah mempelajari blok at-switch dengan cabang at-case yang dicocokkan menggunakan kesamaan ketat dan cadangan at-default yang opsional. Blok ini menggantikan ngSwitch dan merender tepat satu cabang. Berikutnya: pemuatan tertunda dengan at-defer.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pemilihan dengan @switch” gratis?
Ya — teks lengkap “Pemilihan dengan @switch” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pemilihan dengan @switch”?
Pilih template dengan @switch dan @case. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Pemilihan dengan @switch” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Rendering Kondisional dengan @if
- Perulangan dengan @for
- Pemilihan dengan @switch
- Pemuatan Tertunda dengan @defer