Angular6 實現按鈕倒計時效果

在發送短信驗證碼的地方，爲了防止用戶重複點擊（畢竟發送一次須要5分錢成本），每每會將按鈕變灰一分鐘時間，在這期間，按鈕上顯示倒計時。這個效果在最新的Angular6中利用內置的RxJS庫很是容易實現，只要幾行代碼就能夠實現。RxJS（響應式擴展的 JavaScript 版）是一個使用可觀察對象進行響應式編程的庫，它讓組合異步代碼和基於回調的代碼變得更簡單。RxJS 提供了一種對 Observable 類型的實現，直到 Observable 成爲了 JavaScript 語言的一部分而且瀏覽器支持它以前，它都是必要的。
如下是控制器代碼：

            import { interval } from 'rxjs';
            import { take } from 'rxjs/operators';

            const numbers = interval(1000);
            const takeFourNumbers = numbers.pipe(take(60));
            takeFourNumbers.subscribe(
              x => {
                this.paracont = (60-x)+"秒後可重發";
                this.disabledClick=true;
              },
              error => {},
              () => {
                this.paracont = "從新發送驗證碼";
                this.disabledClick=false;
             });        

HTML中的按鈕：

<button type="button" class="btn btn-primary px-4" 
[disabled]="disabledClick" (click)="getverifycode()">{{paracont}}</button>

　　系統建立了一個Observable的定時器對象，每一秒執行一次，這樣實現的異步代碼十分簡潔。須要注意的是代碼中的error => {},不能省略。