AngularJS에서 @HostBinding()과 @HostListener()를 사용하는 것의 차이점

이번에는 AngularJS에서 @HostBinding() 및 @HostListener() 사용 시 차이점과 AngularJS에서 @HostBinding() 및 @HostListener() 사용 시 주의사항에 대해 알려드립니다. 다음은 실제 사례를 살펴보겠습니다.

@HostBinding() 및 @HostListener()는 지침을 사용자 정의할 때 매우 유용합니다. @HostBinding()은 지시문의 호스트 요소에 클래스, 스타일, 속성 등을 추가할 수 있는 반면, @HostListener()는 호스트 요소에서 events를 수신할 수 있습니다.

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

이 글은 Angular2+

를 기반으로 작성되었습니다. 다음으로 입력 시 실시간으로 글꼴과 테두리 색상을 변경하는 명령어를 구현하여 @HostBinding()과 @HostListener()의 사용법을 알아봅니다.

rreee

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

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

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

추천 자료:

axios가 요청을 보낼 때 springmvc는 매개변수를 받아들일 수 없습니다

axios를 통해 네트워크 요청 기능을 구현하는 방법

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