オーバーレイをクリックしたときにモーダルを閉じ、モーダルではない

Question

開いているときにオーバーレイを持つモーダルがあります。私はモーダルを閉じるためにオーバーレイ上のイベントを持っていますが、モーダル自体をクリックしても閉じます。 これを試して、オーバーレイがクリックされたときにのみ閉じるようにしてください。

if (event.target.classList.contains('do-not-click-here')) 

このエラーが発生します。

Property 'classList' does not exist on type 'EventTarget' 

Answer 1

私はちょうどその問題を抱えていました。私はモーダルのためのコンテナのテンプレートrefを使用して、オーバーレイでクリックが発生したときはいつでも、event.pathにあるかどうかをチェックしました。

テンプレート

<div class="overlay" (click)="overlayClicked($event)"> 
     <div class="modal" #modal> 
     <ng-content></ng-content> 
     </div> 
    </div> 

コンポーネント

export class ModalComponent implements OnInit { 
     @ViewChild('modal') modal: ElementRef; 
     visible = false; 

     constructor() { } 

     ngOnInit() { 
     } 

     overlayClicked(event) { 
     if(event.path.indexOf(this.modal.nativeElement) === -1){ 
      this.visible = false; 
     } 
     } 
    }