03-06 디렉티브

디렉티브

Angular 템플릿은 동적입니다. Angular가 표시할할 때 디렉티브가 제공하는 명령에 따라 DOM을 변형합니다.

디렉티브는 @Directive 데코레이터가 있는 클래스입니다. 컴포넌트는 템플릿이 있는 디렉티브입니다. @Component 데코레이터는 실제로 템플릿지향 기능으로 확장된 @Directive 데코레이터입니다.

두 가지 다른 종류의 디렉티브가 있습니다: 구조 디렉티브와 어트리뷰트 디렉티브.

어트리뷰트처럼 엘리먼트 태그 내에 나타나기도 하고, 때로는 이름으로 표시되기도 하지만 할당이나 바인딩의 대상으로 표시되는 경우가 많습니다.

구조 디렉티브는 DOM의 엘리먼트를 추가, 제거 및 교체하여 레이아웃을 변경합니다.

예제 템플릿은 두 가지 내장 구조디렉티브를 사용합니다.

src/app/hero-list.component.html (structural)

<li *ngFor="let hero of heroes"></li> <hero-detail *ngIf="selectedHero"></hero-detail>

l  *ngFor는 Angular가 heroes 목록에서 영웅 당 한 개의 <li>를 각인 시키도록 명령합니다.

l  *ngIf는 선택한 영웅이있는 경우에만 HeroDetail 컴포넌트를 포함합니다.

어트리뷰트 디렉티브는 기존 엘리먼트의 모양이나 동작을 변경합니다. 템플릿에서는 정규 HTML 어트리뷰트처럼 보이므로 이름이 됩니다.

양방향 데이터 바인딩을 구현하는 ngModel 디렉티브는 어트리뷰트 디렉티브의 예입니다. ngModel은 디스플레이 값 프로퍼티를 설정하고 변경 이벤트에 응답하여 기존 엘리먼트 (일반적으로 <input>)의 동작을 수정합니다.

src/app/hero-detail.component.html (ngModel)

<input [(ngModel)]="hero.name">

Angular에는 레이아웃 구조 (예: ngSwitch)를 변경하거나 DOM 엘리먼트 및 컴포넌트의 측면 (예: ngStyle 및 ngClass)을 수정하는 몇 가지 디렉티브가 추가로 있습니다.

물론, 당신은 자신의 디렉티브를 작성할 수도 있습니다. HeroListComponent와 같은 컴포넌트는 맞춤형 디렉티브의 한 종류입니다.