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

創(chuàng)新互聯(lián)成立十載來，這條路我們正越走越好，積累了技術(shù)與客戶資源，形成了良好的口碑。為客戶提供成都網(wǎng)站設(shè)計、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)頁設(shè)計、域名注冊、網(wǎng)絡(luò)營銷、VI設(shè)計、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。網(wǎng)站是否美觀、功能強(qiáng)大、用戶體驗好、性價比高、打開快等等，這些對于網(wǎng)站建設(shè)都非常重要，創(chuàng)新互聯(lián)通過對建站技術(shù)性的掌握、對創(chuàng)意設(shè)計的研究為客戶提供一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進(jìn)步。

官網(wǎng)說明

先看看這兩個api在官網(wǎng)上面的說明吧：

HostBinding（官網(wǎng)鏈接）：

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

HostListener（官網(wǎng)鏈接）：

用于聲明要監(jiān)聽的 DOM 事件，并提供在該事件發(fā)生時要運(yùn)行的處理器方法。

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

代碼示例

假設(shè)此時有一個業(yè)務(wù)場景，有一個輸入框input，我們每次輸入的時候，字的顏色和邊框的顏色就會變化一下，我們?nèi)∶小安屎巛斎肟颉薄?/p>

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

@Component({
  selector: 'app-rainbow-input-demo',
  template: `
    
這是一個彩虹輸入框，每輸入一次都會改變顏色
    
  `,
  styles:[
    `.my-input {
        border:none;
        outline: none;
        border: 2px solid #333333;
        border-radius: 5px;
      }`
  ]
})
export class RainbowInputDemoComponent {
  //默認(rèn)的顏色樣式
  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雖然內(nèi)容變了，由于它是引用類型，其地址值沒有變。所以不會觸發(fā)視圖的重新渲染
    //在angular中，和react似的，我們直接修改引用類型不會觸發(fā)重新渲染，只能覆蓋它或者合并它，使其地址值發(fā)生改變，才會觸發(fā)重新渲染
    //如果覺得麻煩的話，完全可以在模板中使用[style.color]和[style.borderColor]
    this.inputStyleObj = {
      color:this.possibleColors[index],
      borderColor:this.possibleColors[index],
    }
  }
}

效果如圖：

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

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

@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;
  //監(jiān)聽鍵盤落下的事件
  @HostListener('keydown') onKeyDown() {
    //獲取一個隨機(jī)的顏色
    const index = Math.floor(Math.random() * this.possibleColors.length);
    this.color = this.borderColor = this.possibleColors[index];
  }
}

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

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

結(jié)論

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

關(guān)于指令和組件

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

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

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

但是和指令寫法：

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

真的差別不大。

總結(jié)

@HostBinding相當(dāng)于模板上的[]或者bind-；

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

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

感謝各位的閱讀，以上就是“Angular中的HostBinding和HostListener裝飾器的使用場景”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Angular中的HostBinding和HostListener裝飾器的使用場景這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！