javascript - 单击多个 div 但只显示一个类 (Angular2)？

Question

我正在使用 Angular 模态窗口，当我打开模态窗口并在该模态窗口(阴影背景)外单击时，我总是得到该 div 元素的错误类。

示例:我单击模态框，modal 类出现，这没问题，当我单击阴影背景时，modal 类再次出现，为什么？应该出现另一个类。

这是代码( 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);
        }
    }