Modal schließen, wenn man auf Overlay klickt, und nicht das Modal selbst.

Question

Ich habe ein Modal mit einem Overlay, wenn es geöffnet ist. Ich habe ein Ereignis auf der Überlagerung, um das Modal zu schließen, aber es schließt sich, selbst wenn ich auf das Modal selbst klicke. Ich versuche dies, um nur zu schließen, wenn das Overlay angeklickt wird.

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

aber ich bekomme diesen Fehler.

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

Answer 1

Ich hatte gerade dieses Problem. Ich benutzte eine Vorlage Ref auf dem Container für die modale und dann überprüft, ob es in der event.path immer wenn Klick auf das Overlay ausgelöst wurde.

Vorlage

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

Komponente

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; 
     } 
     } 
    }