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

어트리뷰트 디렉티브

Attribute 디렉티브는 DOM 엘리먼트의 모양이나 동작을 변경합니다.

어트리뷰트 디렉티브 예 / 다운로드 예를 사용해 보세요.

 

디렉티브 개요

Angular에는 다음 세 가지 디렉티브가 있습니다.

l  컴포넌트 – 템플릿이 있는 디렉티브.

l  구조 디렉티브 - DOM 엘리먼트를 추가 및 제거하여 DOM 레이아웃을 변경합니다.

l  어트리뷰트 디렉티브 - 엘리먼트, 컴포넌트 또는 다른 디렉티브의 모양 또는 동작을 변경합니다.

컴포넌트는 세 가지 디렉티브 중 가장 일반적입니다. 당신은 QuickStart 가이드에서 컴포넌트를 처음 보았습니다.

구조 디렉티브 뷰의 구조를 변경합니다. 두 가지 예가 NgFor와 NgIf입니다. 구조 디렉티브에서 이들에 대해 배웁니다.

어트리뷰트 디렉티브는 요소의 어트리뷰트로 사용됩니다. 예를 들어 템플릿 구문 가이드의 내장 NgStyle 디렉티브를 사용하면 여러 엘리먼트 스타일을 동시에 변경할 수 있습니다.

 

간단한 어트리뷰트 디렉티브 만들기

어트리뷰트 디렉티브는 최소한 @Directive로 주석을 붙인 컨트롤러 클래스를 작성해야 하며, 어트리뷰트를 식별하는 셀렉터를 지정합니다. 컨트롤러 클래스는 원하는 디렉티브 동작을 구현합니다.

이 페이지는 사용자가 해당 요소를 가리키면 요소의 배경색을 설정하는 간단한 myHighlight 어트리뷰트 디렉티브를 작성하는 방법을 보여줍니다. 다음과 같이 적용 할 수 있습니다.

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

<p myHighlight>Highlight me!</p>

 

디렉티브 코드 작성

설정 지침에 따라 attribute-directives라는 새 로컬 프로젝트를 만듭니다.

표시된 폴더에 다음 소스 파일을 만듭니다.

src/app/highlight.directive.ts

import { Directive, ElementRef, Input } from '@angular/core';   @Directive({ selector: '[myHighlight]' }) export class HighlightDirective {     constructor(el: ElementRef) {        el.nativeElement.style.backgroundColor = 'yellow';     } }

import 문은 Angular core의 기호를 지정합니다.

1.      Directive는 @Directive 데코레이터의 기능을 제공합니다.

2.      ElementRef는 코드가 DOM 엘리먼트를 액세스 할 수 있도록 디렉티브의 생성자에 주입합니다.

3.      Input을 사용하면 바인딩 표현식에서 디렉티브로 데이터가 흐를 수 있습니다.

그런 다음 @Directive 데코레이터 함수는 구성 객체에 디렉티브 메타 데이터를 인수로 포함합니다.

@Directive는 디렉티브와 연결된 템플릿의 HTML을 식별하기 위해 CSS 셀렉터가 필요합니다. 어트리뷰트에 대한 CSS 셀렉터는 대괄호 안에 있는 어트리뷰트 이름입니다. 여기에서 디렉티브의 셀렉터는 [myHighlight]입니다. Angular는 myHighlight라는 어트리뷰트가 있는 템플리트의 모든 요소를 ​​찾습니다.

 

@Directive 메타 데이터 뒤에는 디렉티브의 로직이 포함 된 HighlightDirective라는 디렉티브의 컨트롤러 클래스가옵니다. HighlightDirective를 익스포트하면 다른 컴포넌트가 액세스 할 수 있습니다.

Angular는 각 엘리먼트와 일치하는 디렉티브의 컨트롤러 클래스의 새 인스턴스를 생성하고 생성자매소드에서 Angular ElementRef를 주입합니다. ElementRef는 nativeElement 프로퍼티를 통해 DOM 엘리먼트에 직접 액세스 할 수있는 서비스입니다.

 

어트리뷰트 디렉티브 적용

새 HighlightDirective를 사용하기 위해 디렉티브를 단락 (<p>) 엘리먼트에 어트리뷰트로 적용하는 템플릿을 만듭니다. Angular 용어에서 <p> 엘리먼트는 어트리뷰트 호스트입니다.

다음과 같이 app.component.html 파일에 템플릿을 만듭니다.

src/app/app.component.html

<h1>My First Attribute Directive</h1> <p myHighlight>Highlight me!</p>

이제 AppComponent가 이 템플릿을 참조합니다.

src/app/app.component.ts

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

다음으로 Import 문을 추가하여 Highlight 디렉티브를 가져 와서 해당 클래스를 NgModule 메타 데이터의 declarations에 추가합니다. 이렇게 하면 Angular는 템플릿에서 myHighlight를 만났을 때 디렉티브를 인식합니다.

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 { }

이제 응용프로그램을 실행하면 myHighlight 디렉티브가 단락 텍스트를 강조 표시합니다.

요약하면 Angular는 <p> 엘리먼트에서 myHighlight 프로퍼티를 찾습니다. HighlightDirective 클래스의 인스턴스를 생성하고 디렉티브의 생성자에서 <p> 엘리먼트에 대한 참조를 주입합니다. 결과 <p> 엘리먼트의 배경 스타일을 노란색으로 설정합니다.