Angular で ngSwitch を使用する

少なくとも 1 回は、一般的なプログラミング言語で switch ステートメントを聞いて使用したことがあります。

switch ステートメントは、if ステートメントが多数ある場合にコードのブロックを実行するために使用され、時間を節約してより効率的に機能させるために、それらの if ステートメントを switch ステートメントに変換します。

このチュートリアルでは、switch ステートメントが曜​​日に基づいて実行され、特定の曜日の特定のコードブロックを表示するシナリオを作成する例を紹介します。

Angular で ngSwitch を使用する方法

次のコマンドを使用して、新しいアプリケーションを作成しましょう。

# angular
ng new my-app

Angular で新しいアプリケーションを作成したら、このコマンドを使用してアプリケーションディレクトリに移動します。

# angular
cd my-app

それでは、アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

# angular
ng serve --open

次のコマンドを使用して、新しいコンポーネントを作成します。

# angular
ng g c greeting

greeting.component.ts では、現在の曜日を保存する日を作成します。

# angular
day = new Date().getDay();

switch ステートメントを作成して、日が 0 を返す場合、それは日曜日になり、1 は月曜日になります。したがって、[ngSwitch] を使用して day をバインドし、ngSwitchCase を使用して、greeting.component.html に毎日異なるビューを表示します。

<h1>Hello! Good Morning</h1>

<div [ngSwitch]="day">
  <div *ngSwitchCase="0">Today is Sunday! Have a nice weekend</div>
  <div *ngSwitchCase="1"><h3>Today is Monday, Have a nice day</h3></div>
  <div *ngSwitchCase="2"><h3>Today is Tuesday, Have a nice day</h3></div>
  <div *ngSwitchCase="3"><h3>Today is Wednesday, Have a nice day</h3></div>
  <div *ngSwitchCase="4"><h3>Today is Thursday, Have a nice day</h3></div>
  <div *ngSwitchCase="5"><h3>Today is Friday, Have a nice day</h3></div>
  <div *ngSwitchCase="6"><h3>Today is Saturday, Have a nice weekend</h3></div>
  <div *ngSwitchDefault>Uh oh! Somethings wrong</div>
</div>

出力：

上記の例は、ngSwitch がその日が土曜日であることを示していることを示しています。したがって、このように、ngSwitch と ngSwitchCase を使用して、ケースシナリオに基づいてコードの任意のブロックを表示できます。

デモはこちら