Не работает угловое авто-оповещение-отстранение - PullRequest
Новая
       7

Не работает угловое авто-оповещение-отстранение

0 голосов
/ 20 мая 2018

Я пытаюсь отключить оповещение AUTO (через несколько секунд), работающее в моем приложении 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>

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Поскольку сценарий автоотключения должен быть загружен после того, как предупреждение действительно появилось, оно не соответствует моему требованию ... поэтому я сделал что-то более простое, чем я управляю с помощью кода: 

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;
                        });

}
0 голосов
/ 20 мая 2018

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

Здесьрабочий пример для вас

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

EDIT : теперь Autodismiss работает - использование минимизированной формы вызывает проблемы.Он начинает работать, если я использую неминифицированную версию из 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>
...