AngularJS에서 @HostBinding()과 @HostListener()의 차이점은 무엇입니까

이번에는 AngularJS에서 @HostBinding()과 @HostListener()의 차이점이 무엇인가요? 실제 사례, 하나 일어나서 살펴보세요. @HostBinding() 및 @HostListener()는 지침을 사용자 정의할 때 매우 유용합니다. @HostBinding()은 지시문의 호스트 요소에 클래스, 스타일,

속성

등을 추가할 수 있는 반면, @HostListener()는 호스트 요소에서 events를 수신할 수 있습니다. @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에 색상을 무작위로 할당합니다.

OK, 이제 다음 지침을 따르세요.

효과는 다음과 같습니다.

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트에서!

추천 자료:

vue2에서 axios http 요청을 사용할 수 없는 이유

post 요청을 보낼 때 springMVC가 매개변수를 받을 수 없는 이유

위 내용은 AngularJS에서 @HostBinding()과 @HostListener()의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!