验证码倒计时组件

<button style="width: 100%; height: 32px;"
        nz-button
        [nzType]="btnType"
        [(disabled)]="sendBtnTxt!=_checkSendBtnTxt"
        (click)="onsendVcode()">
  <span translate>{{sendBtnTxt|translate}}</span>
</button>

export class BaSendBtnComponent {
  constructor(
    private router: Router
  ) { }
  // 接收父级菜单数据list
  @Input() btnType="primary"
  @Input() sendBtnTxt: any;
  @Input() isChange;
  @Output() sendVcode: EventEmitter<boolean> = new EventEmitter();
  public _checkSendBtnTxt;
  private _changeSendBtnTimer;
  ngOnInit() {
    this._checkSendBtnTxt = this.sendBtnTxt;
  }
  onsendVcode() {
    this.sendVcode.emit();
    setTimeout(() => {
      if (!this.isChange) {
        return
      }else{
        console.log(111)
        this.changeTxt();
      }
    }, 1000)
  }
  changeTxt() {
    clearInterval(this._changeSendBtnTimer);
    let num = 59;
    this.sendBtnTxt = '(' + num + 's)';
    this._changeSendBtnTimer = setInterval(() => {
      num--;
      this.sendBtnTxt = '(' + num + 's)';
      if (num <= 0) {
        // this.sendBtnTxt = "发送"
        this.sendBtnTxt = "basciFrwk.email.send"
        clearInterval(this._changeSendBtnTimer)
      }
    }, 1000)
  }
  ngOnDestroy() {
    clearInterval(this._changeSendBtnTimer);
  }
}

使用：

<ba-send-btn class="fr" 
             [(isChange)]="isChangeSendBtnTxt"
             style="width:90px;color:#fff;"
             [(sendBtnTxt)]="sendBtnTxt" 
             (sendVcode)="sendVcode()">
</ba-send-btn>

isChangeSendBtnTxt：btn是否可以点击。
sendBtnTxt：“验证码”。
sendVcode：调用发送验证码的接口。

二

<button style="width:96px;height: 40px;vertical-align: middle;"
        nz-button
        [nzType]="'primary'"
        (click)="getCode()"
        [disabled]="_btnText!=btnText"
        class="text-ellipsis">
  <span>{{_btnText}}</span>
</button>

export class BaSendBtnComponent implements OnInit,OnDestroy {

  constructor(private authService:AuthService,) { }

  @Input() btnText:string='验证码'; // btn显示的名字
  @Input() url:string='验证码'; // 发送验证码的接口，可以不用
  @Input() time:number=60; // 倒计时时间
  @Output() sendCode=new EventEmitter(); // 调用验证码的接口


  _btnText=''; // 我该显示的btn名字，会变化的
  ngOnInit() {
    this._btnText=this.btnText;
  }

  getCode(){
    this.sendCode.emit(); // 可以在父组件处理发送逻辑，也可以组件中处理
    // this.authService.verifyCodeForLogin3().then(
    //   res=>{
    //     console.log(res);
    //   }
    // )
    this.sentTime(); // 倒计时
  }

  public timer=null;
  sentTime(){
    let time=this.time||60;
    this.timer=setInterval(()=>{
      this.time--;
      this._btnText=this.time+'秒';
      if(this.time<=0){
        this._btnText=this.btnText;
        clearInterval(this.timer);
      }
    },1000)
  }
  ngOnDestroy(){
    clearInterval(this.timer);
  }
}

<app-ba-send-btn [btnText]="btnText"
             [url]="url"
             [time]="time"
             (sendCode)="sendCode4();">
</app-ba-send-btn>