Question

我试图在我的angular 5应用程序中使用警报AUTO（几秒钟后），但没有成功。找到许多描述相同症状的线程，遵循他们的解决方案，但在我的情况下没有运气。仍然没有弄清楚缺少什么！

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：

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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问题） - 这就是你必须在script <中包含index.html标签的原因/ p>

以下是您的工作示例

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

编辑：Autodismiss现在正常工作 - 使用缩小形式会导致麻烦。如果我使用CDN的非缩小版本

，它就会开始工作

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

＆LT; /应用根 - ＆GT;

× 我在索引哟！

× 警告！更好地检查自己，你看起来不太好。

<!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 AUTO警报 - 不允许工作

2 个答案: