提姆寫程式

0%

Angular 筆記 - 寫一個時鐘

發表於 更新於 分類於 Disqus：
用 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：實現一個簡單的時鐘