0%

Angular 筆記 - 寫一個時鐘

angular

先前有寫過一篇用 JavaScript 寫一個電子鐘

這次要用 Angular 做一個電子鐘,要有日期跟時間,並且時間會一秒跳一次。

練習重點

  • 取到目前時間,並且秒數一秒跳一次。
  • 取道目前日期

使用 date

先設定抓到今天的日期,首先在 app.component.html 寫入一個 today 的變數,並且後面使用 pipe 的 date 元件,其格式內容可以參考[]這篇()

1
2
3
4
5
6
7
<div class="time">
<p>{{today | date:'hh:mm:ss'}}</p>
</div>

<div class="date">
<p>{{today | date}}</p>
</div>

這樣就完成上方是目前時間,下方為今天日期的物件。

TS

如之前 JS 原生寫法可以知道,跟時間有關係就要用 setTimeout 或是 setInterval,因為是要讓秒數無限循環的一秒跳一次,所以使用 setInterval,但問題來了, JS 的寫法跟 ng 寫法是不同的,無法直接把 JS 的程式碼當作參考來用 (想偷懶被抓包)。

在 ng 要改這樣寫。

1
2
3
4
5
6
7
8
9
10
11
today: Date;

constructor() {}

ngOnInit(): void {
// this.timeObservable$ = interval(1000);
this.today = new Date();
setInterval(() => {
this.today = new Date();
}, 1000);
}

剛剛在 html 已經有定義一個變數,所以要給這個變數一個類別,這個類別為時間。
因為打開頁面就要顯示時鐘,所以把程式碼寫在 ngOnInit() 這個方法內,裡面的程式碼是這樣的:

  • today 這個變數本身的值是一個 new Date() 的物件(這跟 JS 原生的方式一樣)。
  • 使用 setInterval() 這個函式,讓這個 today 的物件內容一秒跑一次。

Demo

結語

原本以為會跟原生的一樣多行,但因為 Angular 已經包裝好 date 的方法,所以不必再寫到那麼多的程式碼,算是一個有趣的寫法。也透過這個練習比較了解 Angular 關注點分離的好處!

參考資料

Angular:實現一個簡單的時鐘