사용자 지정 각도 지시문에서 @HostBinding 및 @HostListener를 사용하는 방법

소개

@HostBinding 및 @HostListener는 사용자 지정 지시문에서 실제로 유용할 수 있는 Angular의 두 데코레이터입니다. @HostBinding을 사용하면 지시문을 호스팅하는 요소 또는 구성 요소에서 속성을 설정할 수 있고 @HostListener를 사용하면 호스트 요소 또는 구성 요소에서 이벤트를 수신할 수 있습니다.

이 문서에서는 호스트에서 keydown 이벤트를 수신하는 예제 지시문에서 @HostBinding 및 @HostListener를 사용합니다.

사용 가능한 몇 가지 색상 세트에서 임의의 색상으로 텍스트 및 테두리 색상을 설정합니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

  • Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.
  • Angular 구성 요소 사용에 어느 정도 익숙하면 도움이 될 수 있습니다.

이 튜토리얼은 Node v16.4.2, npm v7.18.1, angular v12.1.1에서 확인되었습니다.

@HostBinding 및 @HostListener 사용

먼저 새 RainbowDirective를 만듭니다.

이것은 @angular/cli로 수행할 수 있습니다.

  1. ng generate directive rainbow --skip-tests

이렇게 하면 앱 declarations에 새 구성 요소가 추가되고 rainbow.directive.ts 파일이 생성됩니다.

import { Directive } from '@angular/core';

@Directive({
  selector: '[appRainbow]'
})
export class RainbowDirective {

  constructor() { }

}

@HostBinding 및 @HostListener를 추가합니다.

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[appRainbow]'
})
export class RainbowDirective {

  possibleColors = [
    'darksalmon',
    'hotpink',
    'lightskyblue',
    'goldenrod',
    'peachpuff',
    'mediumspringgreen',
    'cornflowerblue',
    'blanchedalmond',
    'lightslategrey'
  ];

  @HostBinding('style.color') color!: string;
  @HostBinding('style.border-color') borderColor!: string;

  @HostListener('keydown') newColor() {
    const colorPick = Math.floor(Math.random() * this.possibleColors.length);

    this.color = this.borderColor = this.possibleColors[colorPick];
  }

}

지시문은 다음과 같은 요소에 사용할 수 있습니다.

<input type="text" appRainbow />

우리의 Rainbow 지시문은 두 개의 @HostBinding 데코레이터를 사용하여 두 개의 클래스 멤버를 정의합니다. 하나는 호스트의 style.color 바인딩에 연결되고 다른 하나는 < 코드>style.border-color.

호스트의 모든 클래스, 속성 또는 특성에 바인딩할 수도 있습니다.

다음은 가능한 바인딩의 몇 가지 예입니다.

  • @HostBinding(class.active)
  • @HostBinding(비활성화)
  • @HostBinding(attr.role)

keydown 인수가 있는 @HostListener는 호스트에서 keydown 이벤트를 수신합니다. color 및 borderColor의 값을 변경하는 이 데코레이터에 연결된 함수를 정의하고 변경 사항이 호스트에 자동으로 반영됩니다.

결론

이 문서에서는 호스트에서 keydown 이벤트를 수신하는 예제 지시문에서 @HostBinding 및 @HostListener를 사용했습니다.

Angular에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Angular 주제 페이지를 확인하세요.