在 Angular 2+ 中通过单击警报外部关闭 bootstrap 警报

Question

我的 Angular 2 网络应用程序中有以下警报：

HTML

<div class="alert alert-primary alert-dismissible fade show" role="alert" *ngIf="this.MiddleC == true">
    <strong>YES!!! That's Middle C!!!</strong>
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
  </div>

如何编写一个 TS 方法来在我单击 DOM 中的其他任何地方时关闭此警报？不知道该怎么做。我是否需要从 DOM 中的所有其他元素调用此函数，或者是否有解决此问题的方法？

Answer 1

解决此问题的方法之一是创建额外的 "overlay" 元素，该元素基本上位于 DOM 中模态下方。您的 html 应该看起来像：

<div class="overlay" (click)="this.MiddleC = false"></div>
<div class="alert alert-primary alert-dismissible fade show" role="alert" *ngIf="this.MiddleC == true">
  <strong>YES!!! That's Middle C!!!</strong>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

然后css：

.overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: MODAL_ZINDEX - 1;
}

第二种方法可以是@HostListener，这应该有效：

@HostListener('window:click', ['$event'])
onWindowClick($event){
  //check if its not modal that is clicked
}

https://angular.io/api/core/HostListener

在 Angular 2+ 中通过单击警报外部关闭 bootstrap 警报

dismiss bootstrap alert in Angular 2+ by clicking outside of alert

alert

dismiss

bootstrap-4

angular