Angular의 사용자 지정 지시문

지시문을 사용하면 HTML의 기능을 확장할 수 있습니다. 이 단원에서는 사용자 지정 지시문과 직접 만드는 방법을 소개합니다.

지시문이란 무엇인가요?

지시문은 DOM 요소의 모양이나 동작을 변경합니다. Angular는 *ngIf와 *ngFor 같은 기본 제공 지시문을 제공합니다.

지시문의 유형

• 컴포넌트 지시문
• 특성 지시문 - 모양이나 동작을 변경합니다
• 구조적 지시문 - 레이아웃을 변경합니다(*ngIf 등)

특성 지시문 만들기

Angular CLI를 사용하여 지시문을 만드세요:

ng generate directive highlight

ng generate directive highlight

지시문 적용하기

템플릿에서 지시문을 특성으로 사용하세요:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

지시문 로직

지시문에는 DOM 요소를 변경하는 로직이 들어 있습니다. 예를 들어 배경색을 동적으로 설정할 수 있습니다.

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

@HostListener 데코레이터

@HostListener를 사용하면 지시문이 적용된 요소에서 발생하는 이벤트에 응답할 수 있습니다:

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

지시문에서 @Input() 사용하기

@Input()을 사용하면 템플릿에서 지시문으로 데이터를 전달할 수 있습니다:

@Input() defaultColor: string;

요약

Angular 앱을 향상시키기 위해 사용자 지정 지시문을 만들고 사용하는 방법을 배웠습니다. 잘하셨습니다!