关闭模式时，点击覆盖，而不是模式它自我

Question

我有一个模式与覆盖当它打开。我在叠加层上有一个关闭模式的事件，但即使我点击了模态本身，它也会关闭。 即时通讯尝试此，只有当叠加被点击时才关闭。

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

但我得到这个错误。

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

Answer 1

我刚刚有这个问题。我在模型的容器上使用了一个模板参考，然后检查它是否在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; 
     } 
     } 
    }