Angular 2 警报仅显示一次答案

【问题标题】：Angular 2 alert displays only onceAngular 2 警报仅显示一次
【发布时间】：2017-02-15 15:56:59
【问题描述】：

我有一个 Angular 2 忘记密码组件。该组件要求服务器生成短信验证码，并在短信发送时提醒用户。收到服务响应后，会显示一条警报，说明代码已使用*ngIf 发送到用户的手机。

但是，当用户要求输入第二个代码时，警报 (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>

【问题讨论】：

请格式化您的代码，使其可读...
@bergben 这也是我眼中的一根刺：D

标签： angular ng2-bootstrap

【解决方案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;
}

【讨论】：