Angular 2
@HostBinding 데코레이터를 사용하여 호스트 노드의 속성 값에 영향을주는 특성 지시문입니다.

@HostBinding

@HostBinding 데코레이터를 사용하면 지시문의 호스트 요소에 속성 값을 프로그래밍 방식으로 설정할 수 있습니다. 그것은 특별히 호스트 요소를 대상으로한다는 점을 제외하고 템플릿에 정의 된 속성 바인딩과 비슷하게 작동합니다. 바인딩은 모든 변경 감지주기마다 검사되므로 원하는 경우 동적으로 변경할 수 있습니다. 예를 들어, 클래스를 누를 때 클래스를 동적으로 추가하는 버튼에 대한 지시문을 만들려고한다고 가정 해 보겠습니다. 그 모양은 다음과 같습니다.

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

@Directive({
  selector: '[appButtonPress]'
})
export class ButtonPressDirective {
  @HostBinding('attr.role') role = 'button';
  @HostBinding('class.pressed') isPressed: boolean;

  @HostListener('mousedown') hasPressed() {
    this.isPressed = true;
  }
  @HostListener('mouseup') hasReleased() {
    this.isPressed = false;
  }
}

@HostBinding의 두 가지 사용 사례 모두에 대해 우리가 영향을 미치고 자하는 속성에 대한 문자열 값을 전달한다는 것을 주목하십시오. 데코레이터에 문자열을 제공하지 않으면 클래스 멤버의 이름이 대신 사용됩니다. 첫 번째 @HostBinding에서 우리는 role 속성을 버튼에 정적으로 설정하고 있습니다. 두 번째 예제에서는 isPressed가 true 일 때 누른 클래스가 적용됩니다.