Javascript 点击多个div，但只显示一个类（Angular2）？

我在angular中处理一个模态窗口，当我打开模态窗口并在该模态窗口（阴影背景）外单击时，我总是得到该div元素的错误类

示例：我单击模态，模态类出现，这是正常的，当我单击阴影背景时，模态类再次出现，为什么？应该显示另一个类

以下是代码（typescript文件）：

下面是相应的.html文件：

<div class="modalall">
      <div *ngIf="closeIt" (click)="close()"n class="modalclose">x</div>
      <div #ova class="modal">
         some text
      </div>
</div>

x
一些文本

试试这个（在指令中更好）：

---

你为什么要上课？我认为当你打开一个模态时，里面有一个包含模态的div，所以当你点击时，两次都会得到这个div。因此，也许你第一次而不是第二次得到了错误的类。你的模态的css是什么？要完成@Wandrille的请求，可以做一个有效的plunkr吗？我猜是你的z指数搞乱了你的点击。

<div class="modalall">
      <div *ngIf="closeIt" (click)="close()"n class="modalclose">x</div>
      <div #ova class="modal">
         some text
      </div>
</div>

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