Angular 自动关闭警报不起作用

Question

我试图让警报自动关闭（几秒钟后）在我的 angular 5 应用程序中工作，但没有成功。发现许多描述相同症状的线程，遵循他们的解决方案，但在我的情况下没有运气。还是没弄明白少了什么！

HTML:

<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>

package.json:

"dependencies": {
"bootstrap": "^4.0.0",
"bootstrap-auto-dismiss-alert": "^1.0.2",

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title...</title>
  <!-- Dev Mode -->
  <!-- base href="/"-->
  <!-- Production Mode -->
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link href="tdf.ico" rel="icon" type="image/x-icon" />
  <link href="tdf.ico" rel="shortcut icon" type="image/x-icon" />
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap-auto-dismiss-alert@1.0.2/bootstrap-auto-dismiss-alert.js"></script>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  
</head>
<body>
  <!-- app-root></app-root-->
  
  <div  class="alert alert-danger alert-dismissible" data-auto-dismiss role="alert">
    <button class="close" aria-label="close" data-dismiss="alert">&times;</button>
    <span id="alertMsg">Im in index yo!</span>
</div>
<div class="alert alert-warning alert-dismissible" data-auto-dismiss role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</body>
</html>

更新：我之前尝试过类似的东西，更新了我的 index.html 以及我使用的不同版本的脚本

angular-cli.json

"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/popper.js/dist/umd/popper.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
]

我正在我的主要应用程序组件中加载一个嵌套组件：

app.component.html:

<tabset>
  <!-- tab heading='User' [active]="true">
   <app-resource-manager></app-resource-manager>
  </tab-->
  <tab>
    <ng-template tabHeading>{{user}}</ng-template>
    <app-resource-manager></app-resource-manager>
  </tab>
  <tab *ngIf="isAdmin">
    <ng-template tabHeading>Admin</ng-template>
    <app-privilege-manager></app-privilege-manager>
  </tab>
</tabset>

Answer 1

JQuery 并且 BootstrapJS 可能未加载。

在您的 index.html

末尾添加这个

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

您可以将 CSS 包含在 index.html 中或将其移至 angular.json、styles 部分

    "styles": [
      "src/styles.css"
       ,"../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
        "scripts": [
              "../node_modules/jquery/dist/jquery.min.js",
           "../node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

如您所见，有 scripts 部分。通常你应该在此处包含来自 node_modules 的脚本文件，但由于某种原因它无法加载脚本包（似乎是 Stackblitz 问题） - 这就是为什么你必须在 index.html 中包含 script 标签

这是适合您的工作示例

https://stackblitz.com/edit/angular-fynumd

编辑：自动关闭现在可以工作了——使用缩小的形式会导致麻烦。如果我使用来自 CDN

的非缩小版本，它就会开始工作

https://stackblitz.com/edit/angular-fynumd?file=src%2Findex.html

× 我在索引哟！

× 警告！最好检查一下自己，你看起来不太好。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title...</title>
  <!-- Dev Mode -->
  <!-- base href="/"-->
  <!-- Production Mode -->
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link href="tdf.ico" rel="icon" type="image/x-icon" />
  <link href="tdf.ico" rel="shortcut icon" type="image/x-icon" />
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  
</head>
<body>
  <!-- app-root></app-root-->
  
  <div  class="alert alert-danger alert-dismissible" data-auto-dismiss role="alert">
    <button class="close" aria-label="close" data-dismiss="alert">&times;</button>
    <span id="alertMsg">Im in index yo!</span>
</div>
<div class="alert alert-warning alert-dismissible" data-auto-dismiss role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</body>
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap-auto-dismiss-alert@1.0.2/bootstrap-auto-dismiss-alert.js"></script>
</html>

Answer 2

由于必须在警报实际出现后加载自动关闭脚本，它不符合我的要求...所以我做了一些更容易通过代码控制的事情：

export class MyComponent {
globalError: string;
isBusy: boolean;

constructor(private service: ResourcesService, private router: Router) {

    service.resourceErrorHandler$.subscribe(value => {
                        this.globalError = value;
                        setTimeout(() => this.globalError = null, 1000);
                        });

    service.busyHandler$.subscribe(value => {
                        this.isBusy = value;
                        });

}

Angular 自动关闭警报不起作用

Angular AUTO alert-dismissible isn't working

alert

bootstrapping

angular