Angular 5中Alert自动关闭功能失效问题求助

看起来你遇到的核心问题是：index.html中的静态Alert能正常自动关闭，但Angular组件里动态渲染的Alert（由*ngIf控制显示）却不行。这背后的原因是第三方的bootstrap-auto-dismiss-alert脚本只会在页面初始加载时扫描DOM元素并绑定自动关闭逻辑，而Angular组件的DOM是动态生成的（比如当globalError变为true时，Alert才被渲染到页面），这时候脚本已经执行过了，新的Alert元素没有被初始化。

下面给出几个具体的解决方案，按推荐程度排序：

方案一：实现Angular原生的自动关闭逻辑（最推荐） #

既然用了Angular，最好摆脱对jQuery和第三方脚本的依赖，用RxJS实现更符合Angular风格的自动关闭功能，代码也更可控：

组件代码（.ts） #

import { Component } from '@angular/core';
import { timer } from 'rxjs';
import { take } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  globalError: string;

  // 示例：设置错误信息并启动自动关闭
  showError(message: string) {
    this.globalError = message;
    // 3秒后自动清除错误（时间可自行调整）
    timer(3000).pipe(take(1)).subscribe(() => {
      this.clearErrors();
    });
  }

  clearErrors() {
    this.globalError = null;
  }
}

HTML模板（.html） #

不需要data-auto-dismiss属性了，保持原有结构即可：

<div id="alert" *ngIf="globalError" class="alert alert-danger alert-dismissible" role="alert">
  <a (click)="clearErrors()" class="close" aria-label="close" data-dismiss="alert">&times;</a>
  <span id="alertMsg">{{globalError}}</span>
</div>

这个方案完全不需要依赖第三方脚本，也不会有DOM动态生成的问题，是最适合Angular的做法。

方案二：手动触发第三方脚本的初始化 #

如果你坚持使用bootstrap-auto-dismiss-alert，需要在Angular组件的Alert被渲染后，手动调用脚本的初始化方法，绑定自动关闭逻辑：

第一步：统一脚本加载配置 #

首先解决你当前的脚本重复加载问题：angular-cli.json和index.html都加载了jQuery、Bootstrap，这可能导致冲突。建议统一在angular-cli.json中配置：

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/popper.js/dist/umd/popper.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  "../node_modules/bootstrap-auto-dismiss-alert/dist/bootstrap-auto-dismiss-alert.js"
]

然后删除index.html中所有的jQuery、Popper、Bootstrap相关的<script>和<link>引用，避免版本冲突。

第二步：组件中手动初始化 #

在组件中，当globalError被设置后，延迟一点时间调用脚本的初始化方法（因为Angular更新DOM需要一点时间）：

import { Component } from '@angular/core';
declare var $: any; // 声明jQuery类型，避免TS报错

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  globalError: string;

  showError(message: string) {
    this.globalError = message;
    // 延迟0秒执行，确保Angular已经完成DOM渲染
    setTimeout(() => {
      $('[data-auto-dismiss]').autoDismissAlert();
    }, 0);
  }

  clearErrors() {
    this.globalError = null;
  }
}

HTML模板保持原有带data-auto-dismiss的结构即可：

<div id="alert" *ngIf="globalError" class="alert alert-danger alert-dismissible" data-auto-dismiss role="alert">
  <a (click)="clearErrors()" class="close" aria-label="close" data-dismiss="alert">&times;</a>
  <span id="alertMsg">{{globalError}}</span>
</div>

额外注意事项：Bootstrap版本冲突 #

你当前的index.html中引用了Bootstrap 3.3.7的CSS，但package.json里Bootstrap是4.x版本，这会导致样式和JS不兼容（比如Alert的结构在Bootstrap 3和4中有差异）。一定要确保CSS和JS版本一致，建议统一使用Bootstrap 4的CSS，在angular-cli.json的styles中已经配置了，所以删除index.html中的Bootstrap 3 CSS引用。

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