在Angular 2+中解除引导警报；通过在警报之外单击

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

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>

是的！！！这是中间的C
&时代；

---

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

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

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

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

---

解决这个问题的方法之一是创建额外的“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>

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

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