如何在关闭Angular的ngbAlert提示框后重新显示它

• 问题原因：
  点击ngbAlert的关闭按钮时，组件会自行隐藏，但此时你设置的showErrorAlert变量仍为true。后续再次将showErrorAlert设为true时，变量值未发生变化，Angular的变化检测不会触发*ngIf重新渲染组件，导致提示框无法再次显示。

• 解决方案：

  1. 监听关闭事件，重置显示状态
     在模板中给ngb-alert绑定(close)事件，当用户点击关闭按钮时，将showErrorAlert设为false：

     <ngb-alert class="veri-alert" 
                [type]="alert.type" 
                [dismissible]="true" 
                *ngIf="showErrorAlert"
                (close)="showErrorAlert = false">
       <span class="icon icon-alert-dark"></span>
       <span class="pl-2">{{ alert.message }}</span>
     </ngb-alert>
     

  2. API请求失败时正确更新状态
     在API请求失败的回调函数中，先更新alert的错误信息，再将showErrorAlert设为true，确保状态变化能被Angular检测到：

     // 示例：API请求失败处理函数
     onApiRequestFailed(error: any) {
       // 更新提示框内容
       this.alert = {
         type: 'danger',
         message: error.message || '请求失败，请稍后重试'
       };
       // 触发提示框显示
       this.showErrorAlert = true;
     }
     

• 补充说明：
  这种方式通过*ngIf销毁并重建ngbAlert组件，确保每次显示时组件都处于初始状态，避免因组件内部状态残留导致的显示异常。

内容的提问来源于stack exchange，提问作者Sujeet.G