這次帶給大家AngularJS中@HostBinding()和@HostListener()有什麼差別,AngularJS中使用@HostBinding()和@HostListener()的注意事項有哪些,下面就是實戰案例,一起來看一下。
@HostBinding()和@HostListener()在自訂指令時非常有用。 @HostBinding()可以為指令的宿主元素添加類別、樣式、屬性等,而@HostListener()可以監聽宿主元素上的事件。
@HostBinding()和@HostListener()不只用在自訂指令,只是在自訂指令中用的較多
本文基於Angular2+
下面我們透過實作一個在輸入時即時改變字體和邊框顏色的指令,學習@HostBinding()和@HostListener()的用法。
import { Directive, HostBinding, HostListener } from '@angular/core'; @Directive({ selector: '[appRainbow]'① }) export class RainbowDirective{ possibleColors = [ 'darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff', 'mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey' ];② @HostBinding('style.color') color: string; @HostBinding('style.borderColor') borderColor: string;③ @HostListener('keydown') onKeydown(){④ const colorPick = Math.floor(Math.random() * this.possibleColors.length); this.color = this.borderColor = this.possibleColors[colorPick]; } }
說一下上面程式碼的主要部分:
①:為我們的指令取名為appRainbow
②:定義我們需要展示的所有可能的顏色
③:定義並用@HostBinding()裝飾color和borderColor,用於設定樣式
④:用@HostListener()監聽宿主元素的keydown事件,為color和borderColor隨機分配顏色
OK,現在就來使用我們的指令:
效果就像這樣:
NOTE:別忘了把指令引入你的模組
我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是AngularJS中@HostBinding()和@HostListener()有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!