Angular 14中实现Bootstrap警告框自动关闭的方法

要实现警告框3秒后自动关闭，你需要在设置提示消息后，通过定时器定时清除对应的消息变量（errorMsg/successMsg）——因为Angular的*ngIf是根据变量是否存在来控制DOM显示的。同时修复HTML里的小语法错误，具体步骤如下：

1. 修正HTML代码的语法错误 #

你的关闭按钮aria-label属性缺少闭合引号，先修复这个问题：

<div *ngIf="errorMsg" class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong [innerHTML]="errorMsg"></strong> 
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- 成功提示框的对应结构（假设你已定义） -->
<div *ngIf="successMsg" class="alert alert-success alert-dismissible fade show" role="alert">
    <strong [innerHTML]="successMsg"></strong> 
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

2. 在TS代码中添加自动清除逻辑 #

在设置errorMsg和successMsg后，使用setTimeout定时将变量设为null，触发*ngIf自动隐藏警告框：

组件类中添加定时器变量（可选，用于清理定时器） #

在组件类顶部定义变量保存定时器引用，避免组件销毁时定时器仍在运行：

import { Component, OnDestroy } from '@angular/core';

export class YourComponent implements OnDestroy {
  private alertTimer: any; // 保存定时器引用

  // ...其他代码

  ngOnDestroy() {
    // 组件销毁时清除定时器，避免内存泄漏
    if (this.alertTimer) {
      clearTimeout(this.alertTimer);
    }
  }
}

修改userSubmit方法的逻辑 #

userSubmit() {
    var errors = [];

    console.log(this.userForm.get('image').value);
    console.log(this.userForm.value);
    const formData = new FormData();
    formData.append('image', this.images);
    formData.append('id', this.userForm.value.id);
    formData.append('des', this.userForm.value.des);
    formData.append('name', this.userForm.value.name);

    if (
      this.userForm.value.id < '100000' ||
      this.userForm.value.id > '9999999'
    ) {
      errors.push('ID应为6位或7位数字。');
    } if (
      this.userForm.value.name.match(/[^A-Za-z ]/)
    ) {
      errors.push('姓名只能包含字母和空格。');
    } if (
      this.userForm.value.des.match(/[^A-Za-z ]/)
    ) {
      errors.push('职位只能包含字母和空格。');
    } 

    if(errors.length != 0){
      this.errorMsg = errors.join('<br>');
      console.log(this.errorMsg);
      // 3秒后自动清除错误提示
      this.alertTimer = setTimeout(() => {
        this.errorMsg = null;
      }, 3000);
    }else{
      this.service.createData(formData).subscribe((res) => {
        console.log(res);
        this.userForm.reset();
        this.successMsg = res.message;
        // 3秒后自动清除成功提示
        this.alertTimer = setTimeout(() => {
          this.successMsg = null;
        }, 3000);
      });
    }
}

原理说明 #

• Angular的*ngIf指令会根据errorMsg/successMsg是否为真值，自动渲染或销毁警告框DOM元素。
• 通过setTimeout在3秒后将变量设为null，*ngIf会自动移除警告框，实现自动关闭效果。
• 保存定时器引用并在组件销毁时清除，是为了避免不必要的内存占用。

内容的提问来源于stack exchange，提问作者Tanish Gupta