Angular Academy · Pelajaran

Pertukaran dengan @switch

Pilih templat dengan @switch dan @case.

Pelajaran 3 daripada 413 langkah

Pertukaran dengan @switch ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Pemilihan dengan switch

Blok at-switch memilih satu cabang daripada beberapa cabang berdasarkan suatu nilai, seperti pernyataan switch. Blok ini digandingkan dengan at-case dan at-default.

Sintaks switch Asas

Tulis at-switch dengan ungkapan dalam kurungan, kemudian satu atau lebih blok at-case, setiap satunya dengan nilai yang sepadan.

// @switch (status) {
//   @case ('loading') { <p>Loading...</p> }
//   @case ('error')   { <p>Error!</p> }
//   @default          { <p>Ready</p> }
// }

Blok case

Setiap at-case menerima nilai dalam kurungan. Case pertama yang nilainya sama tepat dengan ungkapan switch akan dipaparkan.

Blok default

Blok at-default dipaparkan apabila tiada case yang sepadan. Blok ini adalah pilihan, tetapi disyorkan untuk melengkapkan semua keadaan.

Kesamaan Ketat

Pemadanan menggunakan kesamaan ketat (===). Pastikan nilai case mempunyai jenis yang sama dengan ungkapan switch.

Pemilihan Berdasarkan Isyarat

Ungkapan switch boleh berupa panggilan isyarat, jadi paparan dikemas kini apabila isyarat berubah.

// @switch (state()) {
//   @case ('on')  { <p>On</p> }
//   @case ('off') { <p>Off</p> }
// }

Menggantikan ngSwitch

Ini menggantikan gabungan arahan ngSwitch, star-ngSwitchCase dan star-ngSwitchDefault yang lebih lama dengan sintaks yang lebih kemas dan tanpa import.

Hanya Satu Cabang Dipaparkan

At-switch memaparkan tepat satu cabang yang sepadan (atau lalai). Cabang lain langsung tidak wujud dalam DOM.

Enum dan Pemalar

Case boleh dibandingkan dengan ahli enum atau pemalar yang didedahkan pada komponen, sekali gus meningkatkan kebolehbacaan dan keselamatan jenis.

Penyarangan dalam switch

Setiap blok case boleh mengandungi apa-apa kandungan templat, termasuk blok aliran kawalan lain seperti at-if dan at-for.

Bila Hendak Menggunakan switch

Utamakan at-switch berbanding rantaian at-if / at-else if yang panjang apabila membuat cabang berdasarkan satu nilai dengan beberapa case diskret.

Semakan Pantas: switch

Sandaran blok switch.

Imbas Kembali: Pemilihan

Anda telah mempelajari blok at-switch dengan cabang at-case yang dipadankan menggunakan kesamaan ketat serta sandaran at-default yang bersifat pilihan. Blok ini menggantikan ngSwitch dan memaparkan tepat satu cabang. Seterusnya: pemuatan tertunda dengan at-defer.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
38
Pelajaran
144

Soalan Lazim

Adakah pelajaran “Pertukaran dengan @switch” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Pertukaran dengan @switch”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pertukaran dengan @switch”?

Pilih templat dengan @switch dan @case. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Pertukaran dengan @switch” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Paparan Bersyarat dengan @if
  2. Pengulangan dengan @for
  3. Pertukaran dengan @switch
  4. Pemuatan Tertangguh dengan @defer
← Kembali ke Angular Academy