07 어트리뷰트 디렉티브(Attribute Directive) 02

사용자가 시작한 이벤트 응답

현재 myHighlight는 단순히 엘리먼트 색상을 설정합니다. 이 디렉티브를 보다 동적으로 코딩할 수 있습니다. 사용자가 엘리먼트 안팎으로 마우스를 이동하면 강조 표시 색을 설정하거나 지워서 응답 할 수 있습니다.

다음과 같이 임포트한 심볼 목록에 HostListener 및 Input을 추가하세요.

src/app/highlight.directive.ts (imports)

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

그런 다음 마우스가 들어가거나 나올 때 응답하는 두 개의 이벤트 핸들러를 추가하십시오. HostListener 데코레이터는 각 이벤트 핸들러를 장식합니다.

src/app/highlight.directive.ts (mouse-methods)

@HostListener('mouseenter') onMouseEnter() {     this.highlight(this.highlightColor || this.defaultColor || 'red');   }     @HostListener('mouseleave') onMouseLeave() {     this.highlight(null);   }     private highlight(color: string) {     this.el.nativeElement.style.backgroundColor = color;   }

@HostListener 데코레이터를 사용하면 속성 디렉티브인 이 경우 <p>를 호스팅하는 DOM 엘리먼트의 이벤트를 구독 할 수 있습니다.

물론 표준 JavaScript로 DOM에 접근하여 이벤트 리스너를 수동으로 연결할 수 있습니다. 이러한 접근 방식에는 적어도 세 가지 문제가 있습니다. 1.      리스너를 올바르게 작성해야합니다. 2.      디렉티브가 삭제되면 메모리 누출을 피하기 위해 코드에서 리스너를 분리해야합니다. 3.      DOM API를 직접 사용하는 것이 최선의 방법은 아닙니다.

핸들러는 el DOM 엘리먼트의 색을 설정하는 헬퍼 메서드에 위임합니다. 생성자는 el을 선언하고 초기화합니다.

src/app/highlight.directive.ts (constructor)

constructor(private el: ElementRef) { }

다음은 업데이트 된 디렉티브입니다.

src/app/highlight.directive.ts

import { Directive, ElementRef, HostListener, Input } from '@angular/core';   @Directive({   selector: '[myHighlight]' }) export class HighlightDirective {   constructor(private el: ElementRef) { }     @HostListener('mouseenter') onMouseEnter() {     this.highlight('yellow');   }     @HostListener('mouseleave') onMouseLeave() {     this.highlight(null);   }     private highlight(color: string) {     this.el.nativeElement.style.backgroundColor = color;   }

앱을 실행하고 마우스가 p 위로 마우스를 가져갈 때 배경색이 나타나고 밖으로 나오면 사라지는 지 확인합니다.

 

@Input 데이터 바인딩을 사용하여 디렉티브에 값전달

현재 강조 표시 색은 디렉티브 내에 하드 코딩되어 있습니다. 이러한 코딩은 융통성이 없습니다. 이 섹션에서는 디렉티브를 적용하는 동안 개발자가 강조 색상을 설정할 수있는 권한을 부여합니다.

먼저 디렉티브 클래스에 highlightColor 속성을 추가합니다.

src/app/highlight.directive.ts (highlightColor)

@Input() highlightColor: string;

 

@Input 프로퍼티에 바인딩

@Input 데코레이터를 주목하십시오. 디렉티브의 highlightColor 프로퍼티를 바인딩에 사용할 수 있도록 메타 데이터를 클래스에 추가합니다.

데이터는 바인딩 표현식에서 디렉티브로 흐르기 때문에 input 프로퍼티라고 합니다. 입력 메타 데이터가 없으면 Angular는 바인딩을 거부합니다. 이에 대한 자세한 내용은 아래를 참조하십시오.

AppComponent 템플릿에 다음 디렉티브 바인딩 변형을 추가하여 테스트 해보십시오.

src/app/app.component.html (excerpt)

<p myHighlight highlightColor="yellow">Highlighted in yellow</p> <p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>

AppComponent에 color 프로퍼티를 추가합니다.

src/app/app.component.ts (class)

export class AppComponent {   color = 'yellow'; }

프로퍼티 바인딩을 사용하여 강조 색상을 제어합니다.

src/app/app.component.html (excerpt)

<p myHighlight [highlightColor]="color">Highlighted with parent component's color</p>

좋습니다. 그러나 다음과 같이 동시에 디렉티브를 적용하고 같은 어트리뷰트에 색상을 설정하는 것이 편할 것입니다.

src/app/app.component.html (color)

<p [myHighlight]="color">Highlight me!</p>

[myHighlight] 어트리뷰트 바인딩은 강조 표시 디렉티브를 <p> 엘리먼트에 적용하고 디렉티브의 프로퍼티 바인딩으로 강조 표시 색상을 설정합니다. 디렉티브의 어트리뷰트 셀렉터 ([myHighlight])를 사용하여 두 작업을 모두 수행하고 있습니다. 이것은 선명하고 간결한 구문입니다.

디렉티브의 highlightColor 프로퍼티의 이름을 myHighlight로 변경해야 합니다. 이제 myHighlight가 색상 프로퍼티 바인딩 이름이 되었기 때문입니다.

src/app/highlight.directive.ts (renamed to match directive selector)

@Input() myHighlight: string;

이것은 만족스럽지 못합니다. myHighlight라는 단어는 끔찍한 프로퍼티 이름이고 프로퍼티의 의도를 전달하지 않습니다.

 

@Input 별칭에 바인딩

다행스럽게도 원하는대로 디렉티브 프로퍼티의 이름을 지정하고 바인딩 용도로 별칭을 지정할 수 있습니다.

원래 프로퍼티 이름을 복원하고 @Input에 대한 인수에서 별명을 셀렉터로 지정하십시오.

src/app/highlight.directive.ts (color property with alias)

@Input('myHighlight') highlightColor: string;

디렉티브 내에서 이 프로퍼티는 highlightColor로 알려져 있습니다. 프로퍼티 바깥쪽에서 바인딩할 때는 myHighlight라고 합니다.

당신은 원하는 프로퍼티 이름과 원하는 바인딩 구문을 사용하여 두 세계의 장점을 최대한 활용할 수 있습니다.

src/app/app.component.html (color)

<p [myHighlight]="color">Highlight me!</p>

이제 highlightColor에 바인딩하고 있으므로 onMouseEnter() 메서드를 수정하여 사용하십시오. highlightColor에 바인딩하는 값이 없을 경우 빨간색으로 강조 표시합니다.

src/app/highlight.directive.ts (mouse enter)

@HostListener('mouseenter') onMouseEnter() {   this.highlight(this.highlightColor || 'red'); }

다음은 디렉티브 클래스의 최신 버전입니다.

src/app/highlight.directive.ts (excerpt)

import { Directive, ElementRef, HostListener, Input } from '@angular/core';   @Directive({   selector: '[myHighlight]' }) export class HighlightDirective {     constructor(private el: ElementRef) { }     @Input('myHighlight') highlightColor: string;     @HostListener('mouseenter') onMouseEnter() {     this.highlight(this.highlightColor || 'red');   }     @HostListener('mouseleave') onMouseLeave() {     this.highlight(null);   }     private highlight(color: string) {     this.el.nativeElement.style.backgroundColor = color;   } }