02 템플릿 구문 10

내장 구조 디렉티브

구조 디렉티브는 HTML 레이아웃을 담당합니다. 일반적으로 DOM은 호스트 엘리먼트를 추가, 제거 및 조작하여 DOM 구조를 형성하거나 변형합니다.

구조 디렉티브에 대한 자세한 내용은 구조 디렉티브 가이드에서 다룹니다.

l  별표 (*)로 디렉티브 이름 앞에 붙이는 이유

l  <ng-container>를 사용하여 디렉티브에 적합한 호스트 요소가 없을 때 요소를 그룹화

l  자신의 구조 디렉티브를 작성하는 방법.

l  요소에 하나의 구조 디렉티브 만 적용

이 섹션에서는 일반적인 구조 디렉티브에 대해 소개합니다.

l  NgIf - 조건부로 DOM에 요소를 추가하거나 제거.

l  NgFor - 목록의 각 항목에 대한 템플릿 반복

l  NgSwitch - 대체뷰간에 전환하는 디렉티브 집합

 

NgIf

NgIf 디렉티브는 해당 엘리먼트 (호스트 엘리먼트라고 함)에 적용하여 DOM에서 엘리먼트를 추가하거나 제거 할 수 있습니다. 이 예제에서는 isActive와 같은 조건식에 디렉티브를 바인딩합니다.

src/app/app.component.html

<hero-detail *ngIf="isActive"></hero-detail>

isActive 표현식이 참인 값을 리턴하면 NgIf는 HeroDetailComponent를 DOM에 추가합니다. 표현이 거짓인 경우 NgIf는 HeroDetailComponent를 DOM에서 제거하여 해당 컴포넌트와 모든 하위 컴포넌트를 파괴합니다.

 

표시(Show)/숨기기(Hide)가 동일한 것은 아닙니다.

클래스 또는 스타일 바인딩을 사용하여 엘리먼트의 가시성을 제어 할 수 있습니다.

src/app/app.component.html

<!-- isSpecial is true --> <div [class.hidden]="!isSpecial">Show with class</div> <div [class.hidden]="isSpecial">Hide with class</div>   <!-- HeroDetail is in the DOM but hidden --> <hero-detail [class.hidden]="isSpecial"></hero-detail>   <div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div> <div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>

엘리먼트를 숨기는 것은 NgIf로 엘리먼트를 제거하는 것과는 완전히 다릅니다.

엘리먼트를 숨기면 해당 엘리먼트와 모든 자손이 DOM에 남아 있습니다. 이러한 엘리먼트의 모든 컴포넌트는 메모리에 남아 있으며 Angular는 변경 사항을 계속 확인합니다. 사용자가 볼 수없는 무언가 때문에 상당한 컴퓨팅 리소스 낭비와 성능 저하가 있을 수 있습니다.

NgIf가 false이면 Angular는 엘리먼트와 그 자손을 DOM에서 제거합니다. 이로 인해 컴포넌트가 파괴되어 상당한 리소스가 확보되어 사용자 반응이 향상됩니다.

표시/숨기기 기술은 자식 엘리먼트가 거의없는 몇 가지 엘리먼트에 적합합니다. 큰 컴포넌트 트리를 숨길 때는 주의해야 합니다. NgIf가 더 안전한 선택 일 수 있습니다.

 

null 방지

ngIf 디렉티브는 종종 null을 방지하는 데 사용됩니다. 표시/숨기기는 null방지로 쓸 수 없습니다. 중첩 된 표현식이 null의 프로퍼티에 액세스하려고 시도하면 Angular는 오류를 발생시킵니다.

여기 두 개의 <div>를 null방지하는 NgIf가 있습니다. currentHero 이름은 currentHero가 존해할 때만 나타납니다. nullHero는 절대로 표시되지 않습니다.

<div *ngIf="currentHero">Hello, {{currentHero.name}}</div> <div *ngIf="nullHero">Hello, {{nullHero.name}}</div>

 

NgFor

NgFor는 반복 지시어입니다. 항목 목록을 표시하는 방법입니다. 단일 항목을 표시하는 방법을 정의하는 HTML 블록을 정의합니다. 해당 블록을 목록의 각 항목을 표현하기 위한 템플릿으로 사용하도록 Angular에 지시합니다.

다음은 간단한 <div>에 적용되는 NgFor의 예입니다.

src/app/app.component.html

<div *ngFor="let hero of heroes">{{hero.name}}</div>

다음 예제와 같이 컴포넌트 엘리먼트에 NgFor를 적용 할 수도 있습니다.

src/app/app.component.html

<hero-detail *ngFor="let hero of heroes" [hero]="hero"></hero-detail>

*ngFor에 할당 된 텍스트는 반복 프로세스를 안내하는 명령어입니다.

 

*ngFor 마이크로구문

*ngFor에 할당 된 문자열은 템플릿 표현식이 아닙니다. 이것은 마이크로 구문 (Angular interpretation)이라는 작은 언어입니다. "let hero of heroes"이라는 문자열은 다음을 의미합니다.

heroes 배열의 각 hero를 가져 와서 로컬 hero 루핑 변수에 저장하고 반복 할 때마다 템플릿이있는 HTML에서 사용할 수 있도록 합니다.

Angular는이 명령을 호스트 엘리먼트 주변의 <ng-template>으로 변환 한 다음이 템플리트를 반복적으로 사용하여 목록의 각 영웅에 대한 새로운 엘리먼트 세트 및 바인딩을 작성합니다.