1.組件中定義兩個變量，分別用于控制按鈕是否可以點(diǎn)擊（countDown）和按鈕上的倒計時數(shù)字（countDownTime）：

countDown = false;countDowmTime = 60; // 這里設(shè)置倒計時為60SshowButtonText = '發(fā)送短信驗證碼'； // 可以控制動態(tài)改變的按鈕提示信息

2.寫一個獲取短信驗證碼的方法綁定到頁面的獲取短信驗證碼按鈕上：

getCode(event) {  this.validateForm1.controls['phone'].markAsDirty();           // 點(diǎn)擊獲取驗證碼要以輸入了手機(jī)號為前提  this.validateForm1.controls['phone'].updateValueAndValidity();  this.userProvider.doSendSMS ({ phone: this.validateForm1.controls.phone.value }).subscribe(res =>{   // 如果手機(jī)號驗證通過     if (res) {       this.notice.success('短信驗證碼已發(fā)送！');      this.sendMessage();   // 調(diào)用下面的按鈕倒計時的方法         }        });    } sendMessage() {   // 發(fā)送了短信驗證碼后觸發(fā)本方法，開始倒計時   this.countDown = true;                // 發(fā)送驗證碼后一分鐘內(nèi)，按鈕變成不可點(diǎn)擊狀態(tài)   this.showButtonText = '驗證碼已發(fā)送（' +60+ 's）';           // 驗證碼發(fā)送后的初始狀態(tài)   const start = setInterval(() = > {      if (this.countDownTime >=0 ) {        this.showButtonText = '驗證碼已發(fā)送(' + this.countDownTime-- + 's)';     // 動態(tài)的進(jìn)行倒計時         } else {              clearInterval(start);             // 如果超時則重新發(fā)送              this.showButtonText = '重新發(fā)送'；              this.countDown = false;         // 按鈕再次變成可點(diǎn)擊狀態(tài)             this.countDownTime = 60;             }        }, 1000);   }

3.頁面上用方法中的變量來控制按鈕的顯示效果：

<div style="text-align:center">    <button nz-button [disabled]="countDown" (click)="getCode($event)">{{showButtonText}}</button> ..... </div>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。