Angular 이벤트 바인딩/속성 바인딩@HostListener, @HostBinding

작은 쓰레기 같은 놈들 · 게시됨 2019. 6. 26. 오후 2:42:08

HostListener와 HostBinding 속성 장식자에 들어가기 전에, 호스트 요소를 살펴보겠습니다.

호스트 요소의 개념은 명령어와 컴포넌트 모두에 적용됩니다. 지시의 개념은 꽤 단순합니다. 명령어를 적용하는 요소가 호스트 요소입니다. 예를 들어, HighlightDirective 명령어를 선언했다고 합시다 (selector: '[exeHighlight]''):

로그인이 보이네요.

위 HTML 코드에서 p 요소가 호스트 요소입니다. 명령이 다음과 같은 맞춤 컴포넌트에 적용된다면:

로그인이 보이네요.

이 경우 exe-counter custom 요소가 호스트 요소가 됩니다.

HostListener는 호스트 요소에 이벤트 리스닝을 추가하는 프로퍼티 데코레이터입니다.

Angular에서는 HostBinding 데코레이터를 사용해 요소의 속성 바인딩을 구현할 수 있습니다.

이 지침은 HostListener 데코레이터를 사용해 사용자 클릭 이벤트를 듣는 방법을 보여줍니다

로그인이 보이네요.

또한, 윈도우, 문서, 본체 등 호스트 요소 이외의 객체가 생성하는 이벤트도 들을 수 있습니다
대상은 창, 문서 또는 본문일 수 있습니다

로그인이 보이네요.

@HostBinding()와 @HostListener()는 지시를 맞춤화할 때 유용합니다. @HostBinding()는 명령어의 호스트 요소에 클래스, 스타일, 속성 등을 추가할 수 있고, @HostListener()는 호스트 요소의 이벤트를 들을 수 있습니다.

예시: 타이핑하는 동안 실시간으로 글꼴과 테두리 색상이 변경되는 글꼴과 테두리 색상을 구현합니다

로그인이 보이네요.

위 코드의 주요 부분에 대해 이야기해 봅시다:
(1): 우리 명령 이름은 appRainbow입니다
(2): 우리가 보여줄 수 있는 모든 가능한 색상을 정의하세요
(3): 스타일링을 위한 색상과 테두리를 정의하고 장식합니다 @HostBinding()
(4): @HostListener()를 사용해 호스트 요소의 키다운 이벤트를 듣고 색상과 borderColor에 무작위로 색상을 할당합니다

페이지에 있는 이 명령어를 사용하세요:

로그인이 보이네요.

그 효과는 다음과 같습니다:

[각] Angular 이벤트 바인딩/속성 바인딩@HostListener, @HostBinding

관련 게시물

본 섹션