YuShu Hsiao

最近在上保哥的線上Angular課程的時候，有介紹到比較進階的Event Binding的用法

把他記錄下來

之前的文章有介紹過 Event Binding 的基礎用法

 

情境說明:

提供一個TextBox 讓使用者輸入文字，輸入完之後直接在右邊顯示目前正在輸入的字元數。

當使用者在輸入框按下 Escape 按鍵時，會自動清空輸入框的內容。

 

實作說明 方法一:

開一個新的Component，開啟之後我先在component.ts內寫要實作的邏輯，

在component.ts內我寫了兩個對應的function 

第一個是changeword 事件，當使用者輸入文字之後我就要改變firstKeyWord的值，畫面上字元的數量就會自動改變

第二個是使用者輸入的是Escape鍵要對應的function，要清空畫面上的資料，所以需要將整個TextBox的target傳到ts來

export class Demo1Component implements OnInit {
  constructor() {}

  firstKeyWord = '';

  // 傳入使用者目前輸入的 value
  firstChangeWord(keyvalue: string) {
    this.firstKeyWord = keyvalue;
  }

  // 
  firstCancelWord(input: HTMLInputElement) {
    input.value = '';
    this.firstKeyWord = '';
  }

  ngOnInit() {}
}

接著開始寫template:

這邊的用法就是Angular比較獨特的用法，透過Event Filter去註冊兩個以上的keyup事件

除了畫面上使用的(keyup)、(keyup.escape) 之外，也可以寫(keyup.enter)，

(keyup.escape) => 當使用者輸入Escape鍵的時候才會觸發!

<dir>
    <input type="text" name="" id="" placeholder="請輸入關鍵字" 
    (keyup)="firstChangeWord($event.target.value)" 
    (keyup.escape)="firstCancelWord($event.target)"  >
    <span>目前字元:{{firstKeyWord.length}}</span>
</dir>

這樣就可以完成我們目前的需求，以上是第一個做法

 

實作說明 方法二:

我在component.ts內只寫一個方法，

從前端傳整個DOM 到component.ts 來，

然後我在ts這邊去判斷key值是不是特定的值，再去做邏輯判斷

  secondKeyWord = '';

  // 如果是傳整個Event的話，這邊建議明確定義型別
  secondChangeWord($event: KeyboardEvent) {
    
    //將target 轉型為 HTMLInputElement
    const _target = $event.target as HTMLInputElement;

    if ($event.key === 'Escape') {
      _target.value = '';
    }
    this.secondKeyWord = _target.value;
  }

template的寫法:

<dir>
    <input type="text" name="" id="" placeholder="請輸入關鍵字" (keyup)="secondChangeWord($event)">
    <span>目前字元:{{secondKeyWord.length}}</span>
</dir>

這樣也可以達到一樣的效果!