複数のdivをクリックして1つのクラス（Angular2）のみを表示していますか？

Question

モーダルウィンドウをモーダルウィンドウで開いているときに、モーダルウィンドウを開いてそのモーダルウィンドウ（影付きの背景）の外側をクリックすると、常にそのdiv要素のクラスが間違っています。

例：私は、モーダルをクリックして、モーダルクラスは、私は影の背景をクリックするとモーダルクラスは、なぜ、再び表示され、OKである表示されますか？代わりに別のクラスが表示されます。ここで

はコード（typescriptファイル）である：ここでは

@ViewChild('ova') ova; //accessing the div via refference tag in html 
@HostListener('document:click') onClick($event){ 
    if (this.show) 
    console.log("display event: "+ this.ova.nativeElement.className) 

は、対応の.htmlファイルです。

<div class="modalall"> 
     <div *ngIf="closeIt" (click)="close()"n class="modalclose">x</div> 
     <div #ova class="modal"> 
     some text 
     </div> 
</div> 

Answer 1

（ディレクティブで良い）、これを試してみてください：

@HostListener('document:click', ['$event', '$event.target']) 
    onClick(event: MouseEvent, targetElement: HTMLElement): void { 
     if (!targetElement) { 
      return; 
     } 

     const clickedInside = this.elementRef.nativeElement.contains(targetElement); 
     if (!clickedInside) { 
      this.clickOutside.emit(event); 
     } 
    }