08 구조 디렉티브(Structural Directive) 03

*ngFor 내부

Angular는 *ngFor를 별표(*) 구문에서 템플릿 어트리뷰트를 통해 <ng-template> 엘리먼트로 비슷하게 변형합니다.

다음은 세 가지 방법으로 작성된 NgFor의 모든 기능을 갖춘 응용프로그램입니다.

src/app/app.component.html (inside-ngfor)

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">   ({{i}}) {{hero.name}} </div>   <div template="ngFor let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">   ({{i}}) {{hero.name}} </div>   <ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">   <div [class.odd]="odd">({{i}}) {{hero.name}}</div> </ng-template>

이것은 ngIf보다 명백하게 복잡합니다. NgFor 디렉티브에는 본 설명서에 표시된 NgIf보다 많은 필수 기능과 선택 사양이 있습니다. 최소한 NgFor에는 루핑 변수 (let hero)와 목록 (heroes)이 필요합니다.

ngFor에 할당 된 문자열에서 이러한 기능을 활성화합니다. 이 기능은 Angular의 마이크로 신택스로 작성합니다.

ngFor 문자열 외부의 모든 것은 <ng-template> 내부에서 이동할 때 호스트 엘리먼트(<div>)와 함께 유지됩니다. 이 예에서 [ngClass] = "odd"는 <div>에 유지됩니다.

 

마이크로신텍스

Angular microsyntax를 사용하면 작고 친숙한 문자열로 디렉티브를 구성 할 수 있습니다. microsyntax 파서는 해당 문자열을 <ng-template>의 어트리뷰트로 변환합니다.

l  let 키워드는 템플릿 내에서 참조하는 템플릿 입력 변수를 선언합니다. 이 예제의 입력 변수는 hero, i 및 odd입니다. 파서는 let hero, let I, let odd를 번역하여 let-hero, let-i 및 let-odd라는 변수에 보냅니다.

l  microsyntax 파서는 of 와 trackBy를 가져와서 제목 케이스(of -> Of, trackBy -> TrackBy)처리를 합니다. 디렉티브의 속성 이름 (ngFor)을 앞에 붙여 ngForOf 및 ngForTrackBy 이름을 만듭니다. 그것들은 NgFor내에 선언된 두 개의 입력 프로퍼티입니다. 이것이 디렉티브가 목록이 heroes이며 track-by 함수가 trackById라는 것을 배우는 방법입니다.

l  NgFor 디렉티브가 목록을 반복하면서 자체 컨텍스트 객체의 프로퍼티를 설정합니다. 이러한 프로퍼티에는 index 및 odd와 $ implicit라는 특수 프로퍼티가 있습니다.

l  let-i 및 let-odd 변수는 let i = index 및 let odd = odd로 정의됩니다. Angular는 컨텍스트의 인덱스 및 홀수 속성의 현재 값으로 설정합니다.

l  let-hero의 컨텍스트 프로퍼티를 지정하지 않았습니다. 이것은 암시 적으로 의도된 것입니다. Angular는 NgFor가 현재 반복에 대한 영웅으로 초기화 한 컨텍스트의 $implicit 프로퍼티 값에 let-hero를 설정합니다.

l  API 가이드는 추가 NgFor 디렉티브 프로퍼티 및 컨텍스트 프로퍼티를 설명합니다.

이러한 microsyntax 메커니즘은 구조 디렉티브를 작성할 때 사용할 수 있습니다. NgIf 및 NgFor의 소스 코드를 학습하면 더 많은 것을 배울 수 있습니다.

 

템플릿 입력 변수

템플릿 입력 변수는 템플릿의 단일 인스턴스 내에서 값을 참조 할 수있는 변수입니다. 이 예제에는 hero, i 및 odd와 같은 변수가 여러 개 있습니다. 모두 앞에 let 키워드가 옵니다.

템플릿 입력 변수는 템플릿 참조 변수와 동일하지 않으며, 의미상 또는 구문적으로는 동일하지 않습니다.

템플릿 입력 변수는 let 키워드 (let hero)를 사용하여 선언합니다. 변수의 범위는 반복되는 템플릿의 단일 인스턴스로 제한됩니다. 다른 구조 디렉티브의 정의에서 동일한 변수 이름을 다시 사용할 수 있습니다.

변수 이름 앞에 #(#var)를 붙임으로써 템플릿 참조 변수를 선언합니다. 참조 변수는 첨부 된 엘리먼트, 컴포넌트 또는 디렉티브를 나타냅니다. 전체 템플릿의 어느 곳에서나 액세스 할 수 있습니다.

템플릿 입력 및 참조 변수 이름에는 고유 한 네임 스페이스가 있습니다. let hero에서 주인공은 #hero로 선언 된 주인공과 같은 변수가 아닙니다.

 

호스트 엘리먼트 당 하나의 구조 디렉티브

특정 조건이 사실 일 때만 HTML 블록을 반복하고 싶은 경우가 있습니다. 이럴 때 *ngFor와 *ngIf를 동일한 호스트 엘리먼트에 넣으려고 시도합니다. Angular는 이것을 수용하지 않습니다. 엘리먼트에 하나의 구조 디렉티브만 적용 할 수 있습니다.

이유는 단순성입니다. 구조 디렉티브는 호스트 엘리먼트와 그 자손과 복잡한 작업을 수행 할 수 있습니다. 두 개의 디렉티브가 동일한 호스트 엘리먼트에 대한 소유권을 주장 할 때 어떤 호스트 엘리먼트가 우선권을 갖습니까? NgIf 또는 NgFor는 어느 것이 먼저 가야합니까? NgIf가 NgFor의 효과를 취소 할 수 있습니까? 그렇다면 Angular가 다른 구조 디렉티브를 취소 할 수 있는 능력을 어떻게 일반화해야 합니까?

이 질문들에 대한 쉬운 대답은 없습니다. 여러 구조 디렉티브를 사용하지 않을 경우 해당 디렉티브가 사용되지 않습니다. 이 사용 사례를 위한 쉬운 해결책이 있습니다: *ngFor 엘리먼트를 감싸는 컨테이너 엘리먼트에 *ngIf를 놓습니다. 하나 또는 두 엘리먼트 모두 ng-container일 수 있으므로 추가 수준의 HTML을 도입 할 필요가 없습니다.