Angular6 发送手机验证码按钮倒计时效果实现方法

countDown = false;
countDowmTime = 60; // 这里设置倒计时为60S
showButtonText = '发送短信验证码'； // 可以控制动态改变的按钮提示信息

getCode(event) { 
 this.validateForm1.controls['phone'].markAsDirty(); // 点击获取验证码要以输入了手机号为前提 
 this.validateForm1.controls['phone'].updateValueAndValidity();
 this.userProvider.doSendSMS ({ phone: this.validateForm1.controls.phone.value }).subscribe(res =>{ // 如果手机号验证通过
 if (res) { 
 this.notice.success('短信验证码已发送！');
 this.sendMessage(); // 调用下面的按钮倒计时的方法
 
 } 
 }); 
 }
 
sendMessage() { // 发送了短信验证码后触发本方法，开始倒计时 
 this.countDown = true; // 发送验证码后一分钟内，按钮变成不可点击状态 
 this.showButtonText = '验证码已发送（' +60+ 's）'; // 验证码发送后的初始状态 
 const start = setInterval(() = > { 
 if (this.countDownTime >=0 ) {
 this.showButtonText = '验证码已发送(' + this.countDownTime-- + 's)'; // 动态的进行倒计时
 } else { 
 clearInterval(start); // 如果超时则重新发送 
 this.showButtonText = '重新发送'； 
 this.countDown = false; // 按钮再次变成可点击状态
 this.countDownTime = 60; 
 } 
 }, 1000);
 }

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