Angular에서 @HostBinding() 및 @HostListener() 사용(자세한 튜토리얼)

이 글에서는 주로 Angular @HostBinding()과 @HostListener()의 사용법을 소개하고 있으니 참고용으로 올려보겠습니다.

@HostBinding() 및 @HostListener()는 지침을 사용자 정의할 때 매우 유용합니다. @HostBinding()은 명령의 호스트 요소에 클래스, 스타일, 속성 등을 추가할 수 있으며, @HostListener()는 호스트 요소의 이벤트를 수신할 수 있습니다.

@HostBinding() 및 @HostListener()는 사용자 정의 명령에만 사용되는 것이 아니라 사용자 정의 명령에서도 자주 사용됩니다.

이 문서는 Angular2+를 기반으로 합니다.

아래에서는 글꼴 및 테두리의 실시간 변경을 구현합니다. 색상 지침을 보려면 @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.borderColor') borderColor: string;③
 @HostListener('keydown') onKeydown(){④
  const colorPick = Math.floor(Math.random() * this.possibleColors.length);
  this.color = this.borderColor = this.possibleColors[colorPick];
 }
}

위 코드의 주요 부분에 대해 이야기해 보겠습니다.

①: 지시문의 이름을 appRainbow
②: 표시해야 하는 가능한 모든 색상을 정의합니다.
3: @HostBinding()을 정의하고 사용합니다. 스타일 설정을 위한 색상 및 borderColor 장식
4: @HostListener()를 사용하여 호스트 요소의 keydown 이벤트를 수신하고 color 및 borderColor에 색상을 무작위로 할당합니다

자, 이제 지침을 따르세요:

효과는 다음과 같습니다.

참고: 모듈에 지침을 도입하는 것을 잊지 마세요.

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Angular4는 ng2-file-upload

iview 테이블 높이 동적 설정 방법

vue2.0 설치 스타일/CSS 로더 방법

위 내용은 Angular에서 @HostBinding() 및 @HostListener() 사용(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!