Directive 개요
directive는 커스텀 attribute를 만드는 역할을 한다. attribute에 특정한 역할을 부여하여 동작하도록 한다.
이미 배운 *ngFor, *ngIf 등도 모두 directive 이다. 그런데 이런 directive는 DOM에 영향을 주기 때문에 structural Directive라고 한다. Dom에 영향을 주지 않는 일반적인 Directive는 attribute Directive라고 한다.
여기서는 마우스 오버시 지정한 색깔을 넣어주는 역할을 하는 attribute Directive를 만든다.
커스텀 Directive
커스텀 attribute directive를 생성한다.
|
1 |
ng g directive highlight |
먼저 모든 테이블 tr을 노란색으로 칠하도록 변경해보자.
먼저 ElementRef 서비스를 주입받는다. el.nativeElement 를 하게 되면 자바스크립트 Node가 된다. 그러면 이제 이 Node의 property를 이용해서 background를 노란색으로 칠할수 있다.
|
1 2 3 4 5 6 7 8 9 |
@Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(private el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } } |
이 appHighlight attribute를 tr 컬럼에 적용해보자.
|
1 |
<tr *ngIf="!item.isEdited" appHighlight> |
테이블이 전체가 노란색으로 칠해진것을 볼수 있을것이다. 이처럼 만들어진 attribute를 어느곳이라도 적용만하면 해당 노드가 노란색으로 칠해지게 된다.
이번에는 jquery에서 input_todo를 콘솔창에서 노란색으로 칠하는 코드를 넣어보자. 동일하게 동작하는것을 알수 있다.
|
1 |
document.querySelector('#input_todo').style.backgroundColor='yellow'; |
이번에는 마우스가 오버되면 사용자가 지정한 색깔을 마우스가 나가면 색깔이 없어지는 코드를 만들어보자.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@Directive({ selector: '[appHighlight]' }) export class HighlightDirective { @Input() highlightColor: string; constructor(private el: ElementRef) { // el.nativeElement.style.backgroundColor = 'yellow'; } @HostListener('mouseenter') onMouseEnter() { this.el.nativeElement.style.backgroundColor = this.highlightColor; } @HostListener('mouseleave') onMouseLeave() { this.el.nativeElement.style.backgroundColor = null; } } |
컴포넌트에 사용자 지정 색깔을 넣자.
|
1 |
<tr *ngIf="!item.isEdited" appHighlight [highlightColor]="'#C8FFFF'"> |
이제 마우스를 움직여보면 적용된 것을 알수 있다.