单击对话框外部的区域时，关闭/隐藏对话框

Question

我有一个Angular应用，该应用具有一个弹出对话框，用户可以在其中输入一些信息。当单击应用程序中除弹出对话框之外的任何区域时，我希望关闭该对话框或将其隐藏。这样，用户可以根据需要输入数据，并且只有在弹出对话框之外的单击才会关闭。

我可以使用(mousleave)事件，但是我只希望当用户单击主应用程序中的某个位置（而不是弹出对话框）时隐藏弹出对话框。在下图中，这意味着在蓝色区域中的任何地方。

更新：对我来说，biggesr的困难在于弄清楚如何仅在主应用程序（蓝色区域）中捕获click事件。

Answer 1

组件的使用方式是否错误？该对话框应该在一个固定的全屏元素顶部打开，例如

<div class="overlayer" style="display: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 9999" onclick="closeYourDialog()">
    <div class="your-dialog">
        ...
    </div>
</div>

如果您不喜欢覆盖层，则可以将不透明度设置为0。

Answer 2

您可以将此对话框用作模式（可以是Bootstrap modal），当您在外部单击时，该对话框内部将使用背景来监听和关闭模式。

如果要通过自己的HTML进行操作，则可以创建自己的背景，并在背景上添加click事件监听器。诀窍是防止点击事件从对话框中冒出来。

为背景添加div，例如：

<div *ngIf="customDialogOpen" class="customBackdrop" (click)="customDialogOpen = false">

<dialog-component *ngIf="customDialogOpen"></dialog-component>


.customBackdrop {
  bottom: 0;
  left: 0;
  margin: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;  // lower than the z index of your dialog but higher than rest of the document
}

现在，每当打开对话框时，请将customDialogOpen文件中的.ts标志设置为true。

对于对话框下方的所有(click)事件，请添加以下内容：

<some-elemet  (click)="...(youFunctions); $event.stopPropagation()">

更新

我的回答是将背景作为同级添加，@ incNick提供了一种更好的方法，您可以将整个对话框作为固定元素与背景一起打开，只需添加一个额外的div即可停止传播所有click事件

<div class="customBackdrop" *ngIf="customDialogOpen" (click)="customDialogOpen = false">
    <div (click)="$event.stopPropagation()">
       <dialog-component></dialog-component>
    </div>
</div>

注意：如果您有一个外部div处理传播，则无需在此解决方案或第一个解决方案中添加额外的stopPropagation()。

Answer 3

您可以创建一个ClickOutside指令，以便可以监听单击事件并检查其目标是否为您的目标。您可以签出this page来创建自定义指令。

在您的指令中，您可以使用@HostListener()来监听点击事件：

@Directive({
  selector: '[clickOutside]'
})
export class ClickedOutsideDirective{

    @Output()
    clickOutside: EventEmitter<Event> = new EventEmitter<Event>();

    @HostListener('document:click', ['$event'])
    onClick(event) {
        if(!this.elemRef.nativeElement.contains(event.target)) {
        // Cliecked Outside
         this.clickOutside.emit(event);
        }
    }

    constructor(private elemRef: ElementRef) {
    }
}

然后在您的模板中，可以使用：

<div (clickOutside)="hidePopup()">...</div>

在您的组件中，您可以添加/删除css类或创建/销毁DOM元素。在这种情况下，我假设您在组件中使用@ViewChild() popup: ElementRef定义了弹出窗口：

hidePopup = () => {
    this.popup.nativeElement.classList.add("hidden");
    /*
     * Or you can do some other stuff here 
     */
}