Angular에서 ngSwitch 사용

당신은 적어도 한 번은 일반 프로그래밍 언어에서 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();

요일이 0을 반환하면 일요일이 되고 1이 월요일이 되는 식으로 switch 문을 만들 것입니다. 따라서 [ngSwitch]를 사용하여 day를 바인딩하고 greeting.component.html에 ngSwitchCase를 사용하여 매일 다른 보기를 표시합니다.

<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를 사용하여 사례 시나리오에 따라 코드 블록을 표시할 수 있습니다.

여기 데모