確認するために電話番号をngの:
対応するTSファイルにおいては、変数を宣言
プライベートモバイル:文字列
プライベートbtnCaptchaText:文字列=「伝送符号」
プライベートtimeleftに:数= 0
対応するイベントコード2.書き込みは、トリガイベントに必要
IF(!/ ^ 1 [3456789] {1} \ D {9} $ /。試験(this.mobile)){
this.countDown(60、(timeleftに)=> {
this.btnCaptchaText = `$ {this.timeLeft} S`
}、
()=> {
this.btnCaptchaText =「ゲットコード」
})
リターン
}
this.playerService.getUserCode(this.mobile).subscribe(
RES => {
this.countDown(60、(timeleftに)=> {
this.btnCaptchaText = `$ {this.timeLeft} S`
}、
()=> {
this.btnCaptchaText =「ゲットコード」
})
console.log(RES)
}
)
}
カウントダウン(回:数、onCount、onCompleteの){
this.timeLeft =回
{タイマー=のsetInterval(()=>みましょう
IF(this.timeLeft <= 0){
clearInterval(タイマー)
onCompleteの()
}他{
this.timeLeft--
onCount(this.timeLeft)
}
}、1000)
}
分析:getUserCode機能は、データ伝送サービスで定義されています
=> Xxx.service.tsで
userCodeUrl:文字列= "http://192.168.1.87:8081/api/captcha/bindMobile"。
getUserCode(携帯:文字列):観測<任意> {
戻りthis.http.post(this.userCodeUrl、{携帯}、this.httpOptions)
}
対応するHTML 2.
<スパン> <ボタン(クリック)= "いるSendcode()" [無効] = "timeleftに> 0"> {{btnCaptchaText}} </ボタン> </スパン>