@HostBinding、@HostListener

除了用 :host { class: "control" } 這個寫法以外，也可以用 @HostBinding 裝飾器。

@HostBinding 裝飾器的使用

在 ts 裡面用：

@HostBinding() className = 'control'

@HostBinding() 做的事情是：它會去察看我們設置的屬性名（這裡是 className），然後把它當作一個屬性添加到 host element 裡面，並將 'control' 設置為該屬性的值。

在 @HostBinding() 有一個可選的參數，用來指定你真正想要綁定的屬性名稱：

@HostBinding('class') className = 'control'

這樣 'control' 就會被綁到 class 屬性上，而 className 此時就是一個變數名稱，你可以自由命名。

Component 裝飾器中的 host 設定

不過實務上還是建議使用：

@Component({
  host: {
    class: 'control'
  }
})

事件綁定

host 也可以綁定事件，像是這樣：

@Component({
  host: {
    class: 'control',
    '(click)': 'onClick()'
  }
})

在觸發 click 事件的時候就會調用 onClick 函數。

但也有另一種寫法：

@HostListener('click') onClick() {
  console.log('Clicked');
}

用 @HostListener('事件') 來監聽 host 的事件。