警告

Question

の外側をクリックして2+角度でのブートストラップの警告を消す私は角度2のWebアプリで、次の警告している：

<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方式を

HTMLを書くのですかこの警告は、DOM内の他の場所をクリックしたときに表示されます。これについてどうやって行くかわからない。 DOM内の他のすべての要素からこの関数を呼び出す必要がありますか、これを回避する手段がありますか？

Answer 1

この問題にアプローチする方法の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