내용으로 건너뛰기
Angular에서 사용자 정의 속성 지시문을 만드는 방법

Angular에서 사용자 정의 속성 지시문을 만드는 방법

이 게시물에서는 Angular에서 속성 지시문을 만드는 방법을 배웁니다. 따라서 요소의 배경색을 변경하고 싶다고 가정해 보겠습니다. 이 경우 attribute 지시문을 요소에 적용합니다.

6min read

이 게시물에서는 Angular에서 속성 지시문을 만드는 방법을 배웁니다. 따라서 요소의 배경색을 변경하고 싶다고 가정해 보겠습니다. 이 경우 attribute 지시문을 요소에 적용합니다.

특성 지시문은 사용자 입력 또는 서비스의 데이터를 통해 요소의 동작, 모양 또는 모양을 변경하는 데 사용됩니다. 기본적으로 Angular 2에는 세 가지 유형의 지시문이 있습니다.

  1. 요소
  2. 구조적 지침
  3. 속성 지시문

첫 번째 Attribute 지시문 만들기

Attribute Directive 만들기부터 시작하겠습니다. 이렇게 하려면 클래스를 만들고 데코레이터로 장식 @directive 해야 합니다. 요소의 색상을 변경하는 간단한 속성 지시문은 다음 목록과 같이 만들 수 있습니다.

import { Directive, ElementRef, Renderer } from '@angular/core';
 
@Directive({
    selector: '[chcolor]'
})
export class ChangeColorDirective {
 
    constructor(private el: ElementRef, private render: Renderer) {
        this.changecolor('red');
    }
 
    private changecolor(color: string) {
 
        this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

요소의 색상을 변경하는 속성 지시문을 만드는 동안 색상만 변경하기 위해 새 속성 지시문을 만들 필요는 없다는 점을 명심하십시오. 속성 바인딩을 사용하여 간단한 색상을 변경할 수 있습니다. 그러나 우리가 만든 attribute 지시문은 이 예에서 요소의 색상을 변경합니다. 기억해야 할 몇 가지 중요한 사항이 있습니다.

  1. 핵심 라이브러리에서 Directive, ElementRef 및 Renderer와 같은 필수 모듈 Angular 가져옵니다.
  2. Create a TypeScript class
  3. @directive로 수업을 꾸미세요
  4. 데코레이터 함수에서 selector 속성의 값을 설정합니다@directive. 지시문은 요소의 선택기 값을 사용하여 사용됩니다.
  5. 클래스의 생성자에서 ElementRef 및 Renderer 객체를 삽입합니다.

DOM 요소에 액세스하기 위해 지시문의 생성자에 ElementRef를 삽입하고 있습니다. 또한 DOM의 요소 스타일과 함께 작동하기 위해 지시문의 생성자에 Renderer를 삽입하고 있습니다.  렌더러의 setElementStyle 함수를 호출하고 있습니다. 함수에서는 ElementRef의 객체를 사용하고 현재 요소의 색상 스타일 속성을 설정하여 현재 DOM 요소를 전달합니다. 다음 목록과 같이 AppComponent의 선택기에서 이 속성 지시문을 사용할 수 있습니다.

@Component(
    {
        selector: 'app-container',
        template: `<p chcolor>{{message}}</p>`
    })
export class AppComponent {

우리는 속성 지시문을 사용했습니다.

요소. 단락 텍스트의 색상이 빨간색으로 변경됩니다.  또한 다음 목록에 표시된 대로 app.module.ts에서 attribute 지시문을 선언해야 합니다.

  1. 지시문을 가져와야합니다.
  2. 지시문을 선언해야 합니다.

app.module.ts

import { ChangeColorDirective } from './task/taskcolor.directive';
 
import { app_routing } from './app.routing';
import { DataService } from './shared/data.service';
 
@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule, app_routing],
    declarations: [AppComponent, TasksComponent, HomeComponent, AddtaskComponent, ChangeColorDirective],
    providers: [DataService],
    bootstrap: [AppComponent]
})
export class AppModule { }

여기서는 ChageColorDirective를 가져오고 app.module에서도 선언합니다. 이 작업을 수행한 후에는 모든 구성 요소에서 attribute 지시문을 사용할 수 있어야 합니다.

속성 지시문의 사용자 입력

사용자가 요소 위에 마우스를 가져가거나 마우스를 가져갈 때 요소의 색상을 변경하기 위해 일부 사용자 입력을 기반으로 속성 지시문을 적용해야 할 수 있습니다. 이렇게 하려면 다음을 수행해야 합니다.

  1. 사용자 입력 또는 작업 캡처 및
  2. 각각 색상 또는 클리어 색상을 적용합니다.

다양한 사용자 작업에서 다양한 메서드를 호출하여 사용자 작업을 처리할 수 있습니다. 메서드가 마우스 엔터와 같은 사용자 작업을 처리할 수 있도록 하려면 @HostListener 데코레이터로 메서드를 데코레이션해야 합니다.  다음 목록과 같이 사용자 입력을 처리하도록 지시문을 수정할 수 있습니다.

import { Directive, ElementRef, Renderer, HostListener, Input } from '@angular/core';
 
@Directive({
    selector: '[chcolor]'
})
export class ChangeColorDirective {
    constructor(private el: ElementRef, private render: Renderer) { }
 
    @HostListener('mouseenter') methodToHandleMouseEnterAction() {
        this.changecolor('red');
    }
    @HostListener('mouseleave') methodToHandleMouseExitAction() {
        this.changecolor('blue');
    }
    private changecolor(color: string) {
 
        this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

아시다시피 사용자 작업을 처리하는 두 가지 메서드를 추가했습니다. 마우스 입력 및 마우스 종료 시 색상이 각각 빨간색과 파란색으로 변경됩니다.

바인딩을 사용하여 지시문에 데이터 전달

지금까지 우리는 지시문에 대한 색상 값을 하드 코딩했습니다. 다음 섹션에서는 바인딩을 사용하여 지시문에 데이터를 전달해 보겠습니다. 지시문을 데이터와 바인딩하려면 @Input() 데코레이터를 사용하고 지시문 클래스에 속성을 추가합니다.

@Input('chcolor') highlightColor: string;

attribute 지시문은 다음과 같이 사용할 수 있습니다.

<p [chcolor]="color">{{message}}</p>

바인딩에서 데이터를 가져오도록 attribute 지시문을 다시 작성해 보겠습니다. 속성 지시문이 바인딩될 요소는 색상 데이터를 전달합니다.  요소가 색상 데이터를 속성 바인딩에 바인딩하지 않는 경우 기본 색상 빨간색이 사용됩니다.

이 지시문은 다음 목록에 표시된 대로 다시 만들 수 있습니다.

import { Directive, ElementRef, Renderer, HostListener, Input } from '@angular/core';
 
@Directive({
    selector: '[chcolor]'
})
export class ChangeColorDirective {
    private _defaulColor = 'red';
    @Input('chcolor') highlightColor: string;
 
    constructor(private el: ElementRef, private render: Renderer) { }
 
    @HostListener('mouseenter') methodToHandleMouseEnterAction() {
 
        console.log(this.highlightColor);
        this.changecolor(this.highlightColor || this._defaulColor);
    }
    @HostListener('mouseleave') methodToHandleMouseExitAction() {
        console.log(this.highlightColor);
        this.changecolor(null);
    }
 
    private changecolor(color: string) {
        this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

다음 목록과 같이 속성 지시문에 대한 바인딩을 통해 데이터를 전달할 수 있습니다.

  @Component({
 selector: 'app-container',
 template: `
 <div>
     <input type="radio" name="colors" (click)="color='blue'">blue
     <input type="radio" name="colors" (click)="color='orange'">orange
     <input type="radio" name="colors" (click)="color='green'">green
 </div>
 <p [chcolor]="color">{{message}}</p>`
 })
 export class AppComponent {

라디오 버튼을 만들고 버튼의 클릭 이벤트에 대한 색상 값을 속성 지시문에 바인딩합니다. 라디오 버튼에서 색상을 선택할 수 있으며 마우스를 입력하면 색상이 선택한 값으로 변경됩니다.

실제 응용 프로그램에서는 REST 서비스에서 데이터를 가져와 속성 지시문에 바인딩할 수 있습니다.

결론

이 게시물에서 우리는 Angular의 속성 지시문에 대해 배웠고 요소의 동작이나 모양을 변경하기 위해 이를 만들고 요소의 데이터에 바인딩했습니다. 이 게시물이 도움이 되었기를 바랍니다. 읽어 주셔서 감사합니다!

데모 요청