通过单击警报外部来关闭 Angular 2+ 中的引导警报

【问题标题】：dismiss bootstrap alert in Angular 2+ by clicking outside of alert通过单击警报外部来关闭 Angular 2+ 中的引导警报
【发布时间】：2018-04-09 22:54:29
【问题描述】：

我的 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 中的每个其他元素调用此函数，还是有办法解决这个问题？

【问题讨论】：

标签： angular alert bootstrap-4 dismiss

【解决方案1】：

解决这个问题的方法之一是创建额外的“覆盖”元素，它基本上位于 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

【讨论】：