Fall in IT.

Angular 2 지시자의 종류 본문

프레임워크/Angular Framework

Angular 2 지시자의 종류

D.Y 2017. 11. 26. 19:46


안녕하세요.


오늘은 Angular 2에 지시자에 대해서 아주 간단하게 알아보도록 하겠습니다.



Angular 지시자의 종류

  • Components Directives (컴포넌트 지시자)
  • Structural Directives (구조 지시자)
  • Attribute Directives  (속성 지시자)
  • Custom Directives (커스텀 지시자)


Components Directives (컴포넌트 지시자)

  • 여러 화면에서 공통적으로 사용되는 화면을 A컴포넌트로 만들어 놨다고 가정했을때, A컴포넌트의 selector 속성을 이용하여 컴포넌트 지시자로 사용합니다.
  • home 컴포넌트에서 child-home 컴포넌트를 사용하는 예제입니다.


Structural Directives (구조 지시자)

  • 구조적 지시자는 컴포넌트나 DOM을 추가/삭제하여 어떻게 화면에 나타내는지를 표현합니다. 
  • 실제 DOM트리 자체에 직접 연관이 있습니다.
  • Angular에서 제공하는 내장 지사자이고, ng 접두어가 붙어 있습니다.
  • 대표적으로, ngIf, ngSwitch, ngFor 등이 있습니다.
  • ex. <div *ngIf = "variable">


Attribute Directives  (속성 지시자)

  • 속성 지시자는 DOM의 외형이나 동작을 변경한다.
  • 엘리먼트 내에 []를 사용하여 표시하고, ng 접두어가 붙어 있습니다.
  • 대표적으로, ngClass, ngStyle 등이 있습니다.
  • ex. <div [ngClass] = "variable"> ... </div> 


Custom Directives (커스텀 지시자)

  • 지시자를 추가할 때 지시자의 이름을 원하는 대로 지정할 수 있습니다.
  • 다른 구성요소와 구분하기 위해서 "파일명.directive.ts" 의 형태로 파일을 추가합니다.
  • @Directive 장식자를 사용하고, selector 속성에 지시자 이름을 설정합니다.

    - example. 커스텀 지시자를 생성합니다.

    - app.module에 등록합니다.


    - 커스텀 지시자를 사용합니다.



모두 즐거운 코딩하세요~



Comments