HostBinding

@HostBinding 装饰器允许我们以编程方式在指令的 host 元素上设置属性值。它的工作方式与模板中定义的属性绑定类似，只是它专门针对主机元素。检查每个更改检测周期的绑定，因此可以根据需要动态更改。例如，假设我们要为按钮创建一个指令，当我们按下它时动态添加一个类。这可能看起来像：

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 属性静态设置为 button。对于第二个示例，当 isPressed 为 true 时，将应用按下的类