[從 0 開始的 Angular 生活]No.16 實作練習

發表於 | 更新於 | 分類於

前言

學習完三種資料繫結方法後，雖然還有一種尚未提到，但是我們已經可以嘗試寫一點有趣的東西了，因此弄了 2 題小問題來測試自己有沒有完全吸收。

題目需求


如圖所示，希望實作出兩個小功能

  • 能自動計算輸入的字數
  • 按下 ESC 鍵時能清空輸入

實作過程

沒有遇到太多的困難，主要是查詢有什麼事件可以使用。

  • 輸入這部分我使用了 oninput 事件
  • 然而要求按下 ESC 鍵時能清空輸入，這部分則是使用 onkeydown 事件
    • 而這部分一開始我沒想到原來有類似 Vue 的事件修飾符可以使用，所以是使用 if 判斷，後來才改用事件修飾符
  • 在目前字數那一區塊使用內嵌繫結來計算字數

因此調整後的 template 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="widget-content">
  <div id="searchbox">
    <input type="text" placeholder="請輸入搜尋關鍵字" accesskey="s" 
      (input)="calcLength($event.target.value)" 
      (keydown.escape)="cleanInput($event.target)">
    <input type="button" value="搜尋" id="searchbutton">
  </div>
  目前字數 <span>{{inputStrLen}}</span>
</div>
``` 
**接著來到 component 補上適當的程式碼**
```js
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'firstAngular';
  link = 'http://www.google.com';
  imgUrl = '/assets/images/logo.png';
  inputStrLen = 0;
  changeTitle(altKey: boolean) {
    if (altKey) {
      this.title = 'changeTitle';
    }
  }
  calcLength(str: string) {
    this.inputStrLen = str.length;
  }
  cleanInput(inputEl: HTMLInputElement) {
    this.inputStrLen = 0;
    inputEl.value = '';
  }
}

程式碼的部分，卡最久的地方卻是「不知道怎麼定義型別符合 TypeScript 的規則又能清除 input」。

因為我以為 $event.target 要填的是 KeyboardEvent ，因為我使用的是 onkeydown 事件，後來發現不是這麼一回事。而是要根據傳入參數的型別來寫，折騰了好一陣才知道要寫 HTMLInputElement 。

其實可以不要定義型別就沒有這些問題。但我想既然都要寫 TypeScript 了，就還是好好的學習如何正確撰寫 TypeScript ，才是正道。

成果截圖

成功計算字數

按下 ESC 清空

成果範例 GitHub

小結

嗯，看起來是沒有什麼大問題，只是還不太熟 TypeScript 以及 Angular 的語法。

接下來要講到最後一種繫結方式囉！

0%