深入了解Angular中的HostBinding和HostListener裝飾器

這篇文章帶大家來了解Angular中的兩個裝飾器－HostBinding和HostListener，介紹這兩個裝飾器的使用場景。

我的疑惑

我不知道各位小夥伴在自學angular的時候有沒有遇過這兩個裝飾器——HostBinding和HostListener。這兩個裝飾器我在看官網的api說明的時候，真是百思不得其解，明明每個字我都能看懂，但是連在一起我就是看不懂了。而且官網上面給的範例也很迷，讓我搞不懂這兩個api的使用場景到底是啥。 【相關教學推薦：《angular教學》】

官網說明

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

HostBinding（官網連結）：

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

HostListener（官網連結）：

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

是看完之後也不知道這兩位兄弟的使用場景到底是啥？在我看來，這兩個裝飾器的作用是

為了方便我們將複雜的DOM操作可以抽取成一個指令，以此來精簡程式碼。廢話不多說，上程式碼，一看就懂。

程式碼範例

假設此時有一個業務場景，有一個輸入框

input，我們每次輸入的時候，字的顏色和邊框的顏色就會改變一下，我們取名為「彩虹輸入框」。

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

@Component({
  selector: 'app-rainbow-input-demo',
  template: `
    <h3 id="这是一个彩虹输入框-每输入一次都会改变颜色">这是一个彩虹输入框，每输入一次都会改变颜色</h3>
    <input [class]="&#39;my-input&#39;"
           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 = [
    &#39;darksalmon&#39;, &#39;hotpink&#39;, &#39;lightskyblue&#39;,
    &#39;goldenrod&#39;, &#39;peachpuff&#39;, &#39;mediumspringgreen&#39;,
    &#39;cornflowerblue&#39;, &#39;blanchedalmond&#39;, &#39;lightslategrey&#39;
  ];
  //键盘落下事件
  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: `
    <h3 id="这是一个彩虹输入框-每输入一次都会改变颜色">这是一个彩虹输入框，每输入一次都会改变颜色</h3>
    <input [class]="&#39;my-input&#39;" 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裝飾器的詳細內容。更多資訊請關注PHP中文網其他相關文章！