Question

请告诉我how to close pop screen when use click outside in angular 4 ?，在演示应用程序中，单击按钮时我有one按钮，我正在显示弹出屏幕（正在查找）。我希望在用户单击时将其关闭在外部，但是not on pop up screen换句话说，当用户单击弹出窗口以外的其他位置时，它应该关闭。我尝试使directive能够检测到外部或内部的点击，但这对我不起作用，这是我的代码

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

}

https://stackblitz.com/edit/angular-1xhibr?file=src%2Fapp%2Foutside.directive.ts

Answer 1

只需将类添加到弹出窗口的DOM节点以及弹出窗口之外（或在appOutside元素上）。然后只需在弹出窗口内部或外部的DOM部分上触发checkif click事件即可。将您的查看代码更新为：

<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>

组件类中的那些方法可以是：

closePop() {
    this.ispopUpShow = false;
 }

 ClickedOut(event) {
    if(event.target.className === "hover_bkgr_fricc") {
      this.ispopUpShow = false;
    } 
 }

Updated Stackblitz Example

Answer 2

您实际上需要做的就是将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>

只有这种改变才能奏效。

Here is a fork with the change I made

使用角4外部单击时如何关闭弹出屏幕？

2 个答案: