@switchによる切り替え
@switchと@caseでテンプレートを選択します。
「@switchによる切り替え」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
switch による切り替え
at-switch ブロックは、switch 文のように、値に基づいて複数の分岐から 1 つを選択します。at-case および at-default と組み合わせて使用します。
基本的な switch 構文
括弧内に式を指定した at-switch を記述し、その後に、対応する値を持つ 1 つ以上の at-case ブロックを記述します。
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }case ブロック
各 at-case には、括弧内に値を指定します。値が switch 式と厳密に等しい最初の case がレンダリングされます。
default ブロック
at-default ブロックは、どの case にも一致しない場合にレンダリングされます。省略可能ですが、網羅性のために指定することをおすすめします。
厳密等価
一致判定には厳密等価（===）が使用されます。case の値が switch 式と同じ型になるようにしてください。
Signal で切り替える
switch 式には signal の呼び出しを指定できます。そのため、signal が変化するとビューも更新されます。
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }ngSwitch の置き換え
これは、ngSwitch、star-ngSwitchCase、star-ngSwitchDefault という従来のディレクティブの組み合わせに代わるものです。構文がより簡潔で、インポートも不要です。
レンダリングされるのは 1 つの分岐だけ
At-switch は、一致した分岐（または default）を正確に 1 つだけレンダリングします。それ以外の分岐は DOM にまったく存在しません。
列挙型と定数
case では、コンポーネントで公開されている列挙型のメンバーや定数と比較できます。これにより、可読性と型安全性が向上します。
switch 内で入れ子にする
各 case ブロックには、at-if や at-for などの他の制御フローブロックを含む、任意のテンプレートコンテンツを配置できます。
switch を使う場面
1 つの値に対して複数の個別の case に分岐する場合は、長い at-if / at-else if の連鎖よりも at-switch を使用することをおすすめします。
クイックチェック: switch
switch ブロックのフォールバックを確認します。
振り返り: 切り替え
厳密等価で at-case 分岐を判定し、必要に応じて at-default にフォールバックする at-switch ブロックを学びました。これは ngSwitch に代わるもので、分岐を正確に 1 つだけレンダリングします。次は、at-defer による遅延読み込みです。
よくある質問
「@switchによる切り替え」レッスンは無料ですか？
はい。「@switchによる切り替え」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「@switchによる切り替え」で何を学びますか？
@switchと@caseでテンプレートを選択します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「@switchによる切り替え」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- @ifによる条件付きレンダリング
- @forによるループ
- @switchによる切り替え
- @deferによる遅延読み込み