02 템플릿 구문 12

NgSwitch 디렉티브

NgSwitch는 JavaScript switch 문과 같습니다. 스위치 조건에 따라 여러 엘리먼트 중에서 하나의 엘리먼트를 표시 할 수 있습니다. Angular는 선택한 엘리먼트만 DOM에 넣습니다.

NgSwitch는 실제로 이 예제에서 볼 수있는 NgSwitch, NgSwitchCase 및 NgSwitchDefault와 같은 세 개의 협력 디렉티브 집합이 있습니다.

src/app/app.component.html

<div [ngSwitch]="currentHero.emotion">   <happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></happy-hero>   <sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></sad-hero>   <confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></confused-hero>   <unknown-hero  *ngSwitchDefault           [hero]="currentHero"></unknown-hero> </div>

NgSwitch는 컨트롤러 디렉티브입니다. 스위치 값을 리턴하는 표현식에 바인드 하십시오. 이 예제의 emotion값은 문자열이지만 스위치 값은 모든 유형이 될 수 있습니다.

[ngSwitch]에 바인딩하십시오. NgSwitch는 구조 디렉티브가 아니기 때문에 속성 디렉티브이므로 *ngSwitch를 설정하려고 하면 오류가 발생합니다. 그것은 동반자 지시어의 동작을 변경합니다. 이것은 DOM에 직접적으로 영향을주지 않습니다.

*ngSwitchCase 및 *ngSwitchDefault에 바인딩하십시오. NgSwitchCase 및 NgSwitchDefault 디렉티브는 DOM에서 엘리먼트를 추가하거나 제거하기 때문에 구조적 디렉티브입니다.

l  NgSwitchCase는 바인드된 값이 스위치 값과 같을 때 해당 엘리먼트를 DOM에 추가합니다.

l  NgSwitchDefault는 선택된 NgSwitchCase가 없을 때 해당 엘리먼트를 DOM에 추가합니다.

스위치 디렉티브는 컴포넌트를 추가 및 제거하는 데 특히 유용합니다. 이 예제는 hero-switch.components.ts 파일에 정의 된 4 개의 "감정적 영웅"컴포넌트 사이를 전환합니다. 각 컴포넌트에는 상위 컴포넌트의 currentHero에 바인딩 된 hero 입력 프로퍼티를 가지고 있습니다.

스위치 디렉티브는 네이티브 엘리먼트 및 웹 컴포넌트와도 잘 작동합니다. 예를 들어 <confused-hero> 스위치의 경우를 다음과 같이 바꿀 수 있습니다.

src/app/app.component.html

<div *ngSwitchCase="'confused'">Are you as confused as {{currentHero.name}}?</div>