Javascript 如何关闭弹出屏幕时，使用点击外在角4？

请告诉我

如何在使用angular 4中的click outside时关闭弹出屏幕？

在我的演示应用程序中，我在单击按钮时有一个

按钮，我正在显示弹出屏幕（正在工作）。我希望它应该在用户单击外部时关闭，但
不在弹出屏幕上
换句话说，它应该在用户单击非弹出屏幕时关闭。我尝试制作
指令
来检测外部或内部的单击，但它对我不起作用这是我的代码

import { Directive,ElementRef } from '@angular/core';

@Directive({
  selector: '[appOutside]',
   host: {
   '(document:click)': 'onClick($event)',
  }
})
export class OutsideDirective {

  constructor(private elementRef: ElementRef) { }

  onClick(event) {
   if (!this.elementRef.nativeElement.contains(event.target)) // or some similar check
     alert('clicked')
     //doSomething();
  }

}

只需将类添加到popup的DOM节点&在popup之外（或在appOutside元素上）。然后只需检查单击事件是在弹出窗口内部还是外部的DOM部分触发的。将视图代码更新为：

<div class="hover_bkgr_fricc" *ngIf="ispopUpShow" appOutside (click)="ClickedOut($event)">
    <span class="helper"></span>
    <div class="inside-popup">
        <div class="popupCloseButton" (click)="closePop()">X</div>
        <p>Add any HTML content<br />inside the popup box!</p>
    </div>
</div>

您实际上需要做的就是将
appOutside
指令移动到您的模态上，因为我们想知道单击是否在模态之外。如果将其保留在hover_bkgr_fricc

div上，它将始终位于内部，因为它的样式将占据整个视口

<div class="hover_bkgr_fricc" *ngIf="ispopUpShow" >
    <span class="helper"></span>
    <div appOutside>
        <div class="popupCloseButton">X</div>
        <p>Add any HTML content<br />inside the popup box!</p>
    </div>
</div>

X
在弹出框中添加任何HTML内容

这一改变本身就应该奏效

---

它不工作

弹出窗口未关闭

<div class="hover_bkgr_fricc" *ngIf="ispopUpShow" >
    <span class="helper"></span>
    <div appOutside>
        <div class="popupCloseButton">X</div>
        <p>Add any HTML content<br />inside the popup box!</p>
    </div>
</div>