angular获取手机验证码

.html

    <div class="weui-cell__ft">
      <button class="weui-vcode-btn" [disabled]="disabled" (click)="getCode($event)">{{tips}}</button>
    </div>

.component.ts

  public tips = '获取验证码';
  public disabled = false;



  getCode(event: any) {
    let number = 60;
    this.disabled = true;
    const that = this;
    that.tips = number + 's后重新获取';

    const timer = setInterval(function () {
      number --;
      if (number === 0) {
        that.disabled = false;
        that.tips = '获取验证码';
        clearInterval(timer);
      } else {
        that.tips = number + 's后重新获取';
      }
   }, 1000);

  }

说一下：这里的目的是在setInterval的定时调用方法中更改属性值tips，然后通过数据绑定将倒计时数据展示到模板上。

 

注意这个const that = this;这里这句并不是多此一举,使用that给当前控制器设置一个别名，在setInterval里面使用that而不是this，如果直接使用this则是指代的window。

在定时完成后需要执行clearInterval()方法，暂停定时器。