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 時，將應用按下的類