Angular.js Attribute Directives

Directive에는 3가지 종류가 있다 

 

   ● Component Directive

 

   ● Structural Directive

 

   √  Attribute Directive 

 

 

Component Directive 는 우리가 흔히 아는 component 이고,

 

Structural Directive 는  ngIf ngFor 등이 있다. 이들은 조건 등에 따라 view 의 구조를 바꾸게 된다.

 

Attribute Directive 는 흔히 element의 속성을 바꿔준다. 예를들자면 NgStyle라는 디렉티브를 이용한다면 여러개의 스타일요소를 한번에 탑재시킬 수 있다.

============================================================================

 

   > 이번 게시글에서는 Attribute Directive를 실습해보도록 하겠다.

 

Dirctive는 @Directive라는 어노테이션을 갖는 디렉티브를 조정하는 클래스로 만들어진다. 이 내부엔 속성을 정의하는  selector가  있다.

이 클래스는 원하던 디렉티브 행위가 구현되어있다.

 

 1. ng generate directie practice로 클래스 파일을 만들어보자.  (  이후 컴포넌트를 작성한 것과 동일하게 app.moudle에 작성해준다.

 

 2. 내부에 있는 @Directive의 작성 내용인 metadata들이 controller클래스에 들어온다.

 3. 그리고 ElementRef를 생성자에서 사용하여 

     reference 를 Host(선택된)  DOM Element 에게 주입 (injection) 시킨다.

   3-1)  또한 HostDOM 에게의 direct access을 권한을 준다.  

           우리는 이 직접 접속을 el.nativeElement 으로 할수있게 되었다.

highlight.directive.ts
import { Directive,ElementRef  } from '@angular/core';

@Directive({
  selector: '[appHighlight]'   //hightlight 라는 셀렉터가 이미 있으므로
})
export class HighlightDirective {
  constructor( el: ElementRef)) { 
    el.nativeElement.style.backgroundColor =  ' yello '};
  }
}

4. 우리는 이제 HTML 에서 이 디렉티브를 사용하여 스타일을 만들어 낼 수 있다.

 

 < p appHighLight > 노란 배경이 될것입니다. </appHighLight>

 

============================================================================

 

  > 사용자 선택에 따라 바뀌는 디렉티브 생성 

 @HostListner(' mouseenter' ) orMouseEnter(){

   this.highlight('yello');   // 생성자에 적혀있는 el: elementRef을  사용한 함수를 만들어서
                              // 필요할때 디렉티브를 사용할 것이다.
}

 highlight( color  : string) {
 	el.nativeElement.  style. backgroundColor = color;
 }