单击多个 div 但只显示一个 class (Angular2)？

Question

我正在 angular 中处理模态 window，当我打开模态 window 并在模态 window 外部单击（阴影背景）时，我总是得到那个 div 元素的错误 class。

示例：我点击模态，模态 class 出现，这没问题，当我点击阴影背景时，模态 class又出现了，为什么？应该出现另一个 class。

这是代码（打字稿文件）：

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

单击多个 div 但只显示一个 class (Angular2)？

Clicking on multiple divs but showing only one class (Angular2)?

javascript

css

modal-dialog

angular2-template

angular