Directives - nkiateam/angular-tutorial GitHub Wiki

Angular는 템플릿을 렌더링 할 때 지시어에 따라 DOM을 변환하는 동적인 방식을 갖고 있습니다.

지시문은 Metadata를 갖고 있는 클래스입니다.
Typescript에서 @Directive 데코레이터를 적용하여 Metadata를 클래스에 첨부합니다.

컴포넌트는 동적인 템플릿 구조를 갖고 있습니다.
@Component 데코레이터는 실제로 템플릿 지향기능으로 확장된 @Deirective 데코레이터입니다.

Component는 동적인 방식이지만 아키텍처의 개요는 구성요소와 지시문을 구분합니다.

지시어는 2가지의 종류로 구조 지시자와 속성 지시자로 분류됩니다.
Attribute처럼 엘리먼트 태그 안에 사용되기도 하고 때로는 이름으로 표시되기도 하지만
할당이나 바인딩의 대상으로 자주 등장하는 경향이 있습니다.

1. 구조 지시문

• DOM의 요소를 추가, 제거 및 교체하여 레이아웃 구조를 변경할 수 있습니다.
  예제 템플릿은 2가지 기본 구조 지시문을 사용합니다.

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

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

ngFor - heroes목록에서 hero당 하나의 <li>를 생성하도록 명령합니다.
ngIf - 선택된 hero가 있는 경우 HeroDetail의 구성요소가 포함됩니다.

2. 속성 지시문

• 기존 요소의 모양 또는 동작을 변경합니다. 템플릿 내에서는 정규 HTML속성처럼 보이므로 자체가 이름이 됩니다.
  양방향 데이터 바인딩을 구현하는 ngModel 지정문은 속성 지정문의 예제입니다.
  ngModel은 표시 값 속성을 설정하여 변경 이벤트에 응답하여 기존 요소(ex. <input">)의 행동을 변경합니다.
  

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

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

Angular에는 레이아웃 구조(ex: ngSwitch)를 변경하거나 DOM 요소 및 구성요소의 측면(ex: ngStyle, ngClass)을
수정하는 몇 가지 지시문이 추가로 있습니다.

물론 사용자 지정 지시어도 작성할 수 있습니다.
HeroListComponent와 같은 구성요소는 사용자 지정 지시문의 한 종류입니다.