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

요약

이 페이지에서는 다음을 수행하는 방법에 대해 설명했습니다.

l  엘리먼트의 동작을 수정하는 어트리뷰트 디렉티브 작성

l  템플릿의 엘리먼트에 디렉티브 적용

l  디렉티브의 동작을 변경하는 이벤트에 응답

l  디렉티브에 값 바인딩

최종 소스 코드는 다음과 같습니다.

src/app/app.component.ts

import { Component } from '@angular/core';   @Component({   selector: 'my-app',   templateUrl: './app.component.html' }) export class AppComponent {   color: string; }

 

src/app/app.component.html

<h1>My First Attribute Directive</h1>   <h4>Pick a highlight color</h4> <div>   <input type="radio" name="colors" (click)="color='lightgreen'">Green   <input type="radio" name="colors" (click)="color='yellow'">Yellow   <input type="radio" name="colors" (click)="color='cyan'">Cyan </div> <p [myHighlight]="color">Highlight me!</p>   <p [myHighlight]="color" defaultColor="violet">   Highlight me too! </p>   <hr> <p><i>Mouse over the following lines to see fixed highlights</i></p>   <p [myHighlight]="'yellow'">Highlighted in yellow</p> <p myHighlight="orange">Highlighted in orange</p>

 

src/app/highlight.directive.ts

/* tslint:disable:member-ordering */ import { Directive, ElementRef, HostListener, Input } from '@angular/core';   @Directive({   selector: '[myHighlight]' }) export class HighlightDirective {     constructor(private el: ElementRef) { }     @Input() defaultColor: string;     @Input('myHighlight') highlightColor: string;     @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;   } }

 

src/app/app.module.ts

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';   import { AppComponent } from './app.component'; import { HighlightDirective } from './highlight.directive';   @NgModule({   imports: [ BrowserModule ],   declarations: [     AppComponent,     HighlightDirective   ],   bootstrap: [ AppComponent ] }) export class AppModule { }

또한 Attribute Directive 예제 / 다운로드 예제를 경험하고 다운로드 할 수 있습니다.

 

부록 : 왜 @Input을 추가할까요?

이 데모에서 hightlightColor 속성은 HighlightDirective의 입력 프로퍼티입니다. 별칭없이 적용한 것을 보았습니다.

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

@Input() highlightColor: string;

별칭이 있는것 도 보았습니다.

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

@Input('myHighlight') highlightColor: string;

어느 쪽이든, @Input 데코레이터는 Angular에게 이 프로퍼티가 public이고 부모 컴포넌트에 의해 바인딩 할 수 있음을 알려줍니다. @Input이 없으면 Angular는 프로퍼티에 바인딩하지 않습니다.

@Input을 사용하기 전에 템플릿 HTML을 컴포넌트 프로퍼티에 바인딩했습니다. 뭐가 다를까요?

그 차이는 신뢰의 문제입니다. Angular는 컴포넌트의 템플릿을 컴포넌트에 속한 것으로 간주합니다. 컴포넌트와 해당 템플릿은 암시 적으로 서로를 신뢰합니다. 따라서 컴포넌트의 자체 템플릿은 @Input 데코레이터가 있든 없든, 해당 컴포넌트의 모든 프로퍼티에 바인딩 될 수 있습니다.

그러나 컴포넌트나 디렉티브는 다른 컴포넌트와 디렉티브를 맹목적으로 신뢰하면 안됩니다. 컴포넌트 또는 디렉티브의 프로퍼티는 기본적으로 바인딩에서 숨겨집니다. 그들은 Angular 바인딩 관점에서 private입니다. @Input 데코레이터로 장식하면 속성은 앵귤러 바인딩 관점에서 public입니다. 그래야만 다른 컴포넌트 나 디렉티브에 바인딩 할 수 있습니다.

바인딩에서 속성 이름의 위치에 의해 @Input이 필요한지 여부를 알 수 있습니다.

 

템플릿 표현식에서 등호 (=)의 오른쪽에 나타나면 템플릿의 컴포넌트에 속하며 @Input 데코레이터가 필요하지 않습니다.

등호 (=)의 왼쪽에 대괄호 ([])로 나타나면이 속성은 다른 컴포넌트 또는 디렉티브에 속합니다. 그 속성은 @Input 데코레이터로 장식되어야합니다.

이제 그 추론을 다음 예제에 적용하십시오.