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

单击叠加时关闭模态，而不是自己的模态

1 个答案: