假設有這樣一個需求：我們需要增強 HTML 裡原生的 input 標籤，讓其達到，隨著使用者輸入字元時，其顏色自動切換的效果。

這是一個典型的可以使用 Angular Directive 實現的需求。

每個 Directive 都有一個 host 元素。

![](https://img-blog.csdnimg.cn/img_convert/84ab1839a3cbc6944006fdae1212fccb.png)

> Decorator that marks a DOM property as a host-binding property and supplies configuration metadata. Angular automatically checks host property bindings during change detection, and if a binding changes it updates the host element of the directive.

Directive 裡，修改 @HostBinding 修飾的 Directive 屬性，就相當於修改了 DOM 元素的屬性本身。

![](https://img-blog.csdnimg.cn/img_convert/b253ecea7aac602b5175ee0ccc7414f6.png)

同理，透過 @HostListener 修飾的事件處理函式，在 host 元素髮生對應的事件之後，會自動被觸發。

Rainbow 指令完整的實現程式碼：

```typescript
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);
    console.log('Jerry colorPick: ' + colorPick);
    this.color = this.borderColor = this.possibleColors[colorPick];
  }
}
```

消費這個指令的方法非常簡單：

![](https://img-blog.csdnimg.cn/img_convert/f4c1bc5291c96e1aeeca4b786fc693ff.png)

最後的效果：隨著我在 input 欄位裡輸入欄位，input 字型顏色自動改變。
![](https://img-blog.csdnimg.cn/img_convert/675ddf25efbf77a824eaba16ec6fb7dd.png)

![](https://img-blog.csdnimg.cn/img_convert/ae8dceae86e9bd8017e4269242867ef4.png)

完整程式碼參考我的[Github](https://github.com/wangzixi-diablo/angular-sandbox/commit/b6d36ce9eec1315122211c2787040415f5e590ca)

利用 Angular Directive 和 @HostBinding 實現輸入文字框隨著鍵盤輸入自動變色效果

相關文章