Angular中的HostBinding和HostListener裝飾器的使用場景

這篇文章主要講解了“Angular中的HostBinding和HostListener裝飾器的使用場景”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Angular中的HostBinding和HostListener裝飾器的使用場景”吧！

官網說明

先看看這兩個api在官網上面的說明吧：

HostBinding（官網鏈接）：

用于把一個 DOM 屬性標記為綁定到宿主的屬性，并提供配置元數據。 Angular 在變更檢測期間會自動檢查宿主屬性綁定，如果這個綁定變化了，它就會更新該指令所在的宿主元素。

HostListener（官網鏈接）：

用于聲明要監聽的 DOM 事件，并提供在該事件發生時要運行的處理器方法。

是不是看完之后也不知道這倆兄弟的使用場景到底是啥？在我看來，這倆裝飾器的作用是為了方便我們將復雜的DOM操作可以抽取成一個指令，以此來精簡代碼。廢話不多說，上代碼，一看就懂。

代碼示例

假設此時有一個業務場景，有一個輸入框input，我們每次輸入的時候，字的顏色和邊框的顏色就會變化一下，我們取名叫“彩虹輸入框”。

如果我們不使用組件封裝的方式的話，直接在組件中寫相關的DOM操作，代碼如下：

@Component({
  selector: 'app-rainbow-input-demo',
  template: `
    <h4>這是一個彩虹輸入框，每輸入一次都會改變顏色</h4>
    <input [class]="'my-input'"
           type="text"
           [style]="inputStyleObj"
           (keydown)="onKeyDown()"
    />
  `,
  styles:[
    `.my-input {
        border:none;
        outline: none;
        border: 2px solid #333333;
        border-radius: 5px;
      }`
  ]
})
export class RainbowInputDemoComponent {
  //默認的顏色樣式
  public inputStyleObj = {
    color:null,
    borderColor:null,
  };
  //顏色庫
  public possibleColors = [
    'darksalmon', 'hotpink', 'lightskyblue',
    'goldenrod', 'peachpuff', 'mediumspringgreen',
    'cornflowerblue', 'blanchedalmond', 'lightslategrey'
  ];
  //鍵盤落下事件
  onKeyDown(){
    const index = Math.floor(Math.random() * this.possibleColors.length);
    //如果我們直接使用this.inputStyleObj.color = this.possibleColors[index]的話，
    //this.inputStyleObj雖然內容變了，由于它是引用類型，其地址值沒有變。所以不會觸發視圖的重新渲染
    //在angular中，和react似的，我們直接修改引用類型不會觸發重新渲染，只能覆蓋它或者合并它，使其地址值發生改變，才會觸發重新渲染
    //如果覺得麻煩的話，完全可以在模板中使用[style.color]和[style.borderColor]
    this.inputStyleObj = {
      color:this.possibleColors[index],
      borderColor:this.possibleColors[index],
    }
  }
}

效果如圖：

就這樣，我們實現了這個功能，那么現在有個問題。假如這種rainbowInput我們還需要在其他組件用到怎么辦，難道每次使用的時候我們都把這些代碼復制粘貼一遍嗎？很明顯這不符合組件封裝的原則，如果你真的這么做，技術經理或者項目經理也會打爆你的狗頭、

那么我們就需要將其封裝成一個組件或者一個指令。在這篇文章中我們先把它封裝成一個指令，至于原因后面再說。代碼如下：

@Directive({
  selector: '[appRainbow]'
})
export class RainbowInputDirective {
  public possibleColors = [
    'darksalmon', 'hotpink', 'lightskyblue',
    'goldenrod', 'peachpuff', 'mediumspringgreen',
    'cornflowerblue', 'blanchedalmond', 'lightslategrey'
  ];
  //字體顏色
  @HostBinding('style.color') color: string;
  //邊框顏色
  @HostBinding('style.borderColor') borderColor: string;
  //監聽鍵盤落下的事件
  @HostListener('keydown') onKeyDown() {
    //獲取一個隨機的顏色
    const index = Math.floor(Math.random() * this.possibleColors.length);
    this.color = this.borderColor = this.possibleColors[index];
  }
}

@Component({
  selector: 'app-rainbow-input-demo',
  template: `
    <h4>這是一個彩虹輸入框，每輸入一次都會改變顏色</h4>
    <input [class]="'my-input'" type="text" appRainbow />
  `,
  styles:[
   	//省略，和上面相同
  ]
})
export class RainbowInputDemoComponent {}

就像上面代碼寫的那樣，我們將重復的邏輯抽取了出來，使代碼的維護性和美觀度都有了很大的提升。

結論

在代碼中我們可以看到@HostBinding的作用其實就是將某個屬性綁定到了宿主元素上，但是這個屬性不是隨隨便便的屬性。這個屬性指的是angular模板中支持的屬性，其實@HostBinding就相當于模板中的[]或者bind-。同理@HostListener就相當于模板中的()或者on-。使我們可以在指令當中就可以將屬性和方法綁定到宿主元素上，實現的效果和我們第一種直接將(keydow)和[style]直接寫在模板上是一樣的。所以說，這倆裝飾器里面的字符串那可不能隨便寫。

關于指令和組件

但是，其實在angular當中，組件和指令其實區別不是特別大，因為angular中的組件裝飾器@Component就是繼承自@Directive的。

其實我們將這個DOM操作封裝成一個組件也不是不可以，代碼如下

@Component({
  selector:'input[appRainbow]'
})

但是和指令寫法：

@Directive({
  selector: '[appRainbow]'
})

真的差別不大。

總結

@HostBinding相當于模板上的[]或者bind-；

@HostListener相當于模板上的()或者on-；

就是angular為了不希望我們直接操作DOM，提供的指令中的數據和方法綁定。

感謝各位的閱讀，以上就是“Angular中的HostBinding和HostListener裝飾器的使用場景”的內容了，經過本文的學習后，相信大家對Angular中的HostBinding和HostListener裝飾器的使用場景這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！