Angular 2 警报只显示一次

Question

我有一个 angular 2 忘记密码组件。该组件要求服务器生成 SMS 验证码，并在 SMS 消息发送时提醒用户。收到服务响应后，将显示一条警报，说明代码已使用 *ngIf.

发送到用户的手机 phone

但是，当用户要求输入第二个代码时，不会弹出警报 (ng2-bootstrap)。

如有任何帮助，我们将不胜感激。

@Component({     
   templateUrl:'forgot-password.component.html',
   styleUrls:['../../res/styles/login.component.css'],
   providers:[{provide:AlertConfig, useFactory:getAlertConfig}]

})
export class ForgotPasswordComponent implements OnInit{


   model:any={};
   returnUrl:string;
   smsCodeResponse:SMSVerificationInfo;
   errorMessage:string;
   activeVerificationCodeSent:boolean;  
   constructor(
       private route:ActivatedRoute, 
       private router:Router, 
       private authenticationService:AuthenticationService
   ){}


   requestVerificationCode(){
      this.authenticationService.requestSMSCode(this.model.username)
      .subscribe(
          (s)=>this.smsCodeResponse=s,
          (e)=>this.errorMessage=e,
          ()=> {
              this.activeVerificationCodeSent=this.smsCodeResponse.aktifmi)
          };               
   }

}

模板

<div *ngIf="activeVerificationCodeSent">
   <alert type="danger" dismissible="true">
      <strong>Bilgi</strong> Doğrulama Kodu telefonunuza gonderildi.
   </alert>
</div>

Answer 1

您应该在对话框关闭后将 activeVerificationCodeSent 重置为 false。我希望 <alert> 被解雇，但您不会重置状态。你应该在你的模板中做这样的事情：

<div *ngIf="activeVerificationCodeSent">**
   <alert type="danger" [dismissible]="true" (onClose)="onAlertClose()">
       <strong>Bilgi</strong> Doğrulama Kodu telefonunuza gonderildi.
   </alert>
</div>

并在您的 ForgotPasswordComponent 中添加一个函数：

onAlertClose(): void {
   this.activeVerificationCodeSent = false;
}

Angular 2 警报只显示一次

Angular 2 alert displays only once

ng2-bootstrap

angular