当我在框外或Angular 4框内单击时隐藏覆盖面板答案

【问题标题】：Hide overlaypanel when I click outside the box or in the box Angular 4当我在框外或Angular 4框内单击时隐藏覆盖面板
【发布时间】：2018-12-19 07:47:22
【问题描述】：

我创建了一个类似于 OverlayPanel 的组件，因此我可以在其中进行更多点击或其他操作。但是当我在覆盖层之外或在覆盖层中单击时，它不会退出总是在那里，只有当我单击我所写的按钮时它才会消失。

Here is the link of the StackBlitz

我喜欢这样创建的overlaPanel。

<div class="dropdown">   
  <div (click)="toggle()" class="body">
    <ng-content select="[body]"></ng-content>
  </div>

  <div *ngIf="active" class="popup" >
    <ng-content select="[popup]"></ng-content>
  </div>    
</div>

.dropdown {
  position: relative;
  display: inline-block;
}

.popup {
  display: block;
  position: absolute;
  z-index: 1000;
}

export class OverlaypanelComponent implements OnInit {   
  active = false;

  constructor() {         
  }

  offClickHandler(event: any) {
    if (event['.body'] && event['.popup'] === true) {
      this.active = false;
    }
  }
  ngOnInit(): void {

  }

  toggle() {
    this.active = !this.active;
  }

  close() {
    this.active = !this.active;
  }

}

这是我调用这个组件的时候

 <app-overlaypanel>
        <div body [ngClass]="[getBackgroundColorClass(),clazz]" class="fa fa-pencil-square-o edit-block"></div>
        <div class="overlayPopup" popup>
          <div class="dropdown-menu-item" (click)="openTechnicalEditDialog({cluster: cluster, type: clazz})">Edit</div>
          <div class="dropdown-menu-item" (click)="delete()">Delete</div>
          <div class="dropdown-menu-item" (click)="openTechnicalEditDialog({appendToParentId: cluster.id})" *ngIf="cluster.level <= 9">Append</div>
          <div

 class="dropdown-menu-item" (click)="clicked.emit()">Assign</div>
    </div>
  </app-overlaypanel>

【问题讨论】：

你能在stackblits中添加你的代码吗
@Chellappan 我会尝试，但我在堆栈闪电战中表现不佳
@Chellappan 这是我创建的堆栈闪电战。 stackblitz.com/edit/angular-rfvmjl

标签： html css angular typescript

【解决方案1】：

如果您想在点击菜单外部时关闭下拉菜单，您可以使用主机监听器来了解您是否点击了外部

@HostListener('document:click', ['$event']) clickedOutside($event){

    this.active=false;
  }

我已附上示例，请查看：https://stackblitz.com/edit/angular-5p5d1b

【讨论】：

如果我在菜单中单击，我该如何使菜单被隐藏？
点击下拉项是否要隐藏？
是的，如果您点击退出或隐藏菜单，我想要两者
你能再看看这个链接吗stackblitz.com/edit/angular-5p5d1b
hostListener 是否会降低 Web 应用程序的性能，因为现在一些组件的工作速度变慢了...

【解决方案2】：

您可以使用ng-click-outside 模块，如此处所述https://www.npmjs.com/package/ng-click-outside 在 angular 8 中和我一起工作得很好

【讨论】：

【解决方案3】：

我知道问题是 Angular 4，但如果有人想知道我们如何使用最新版本的 Angular 做同样的事情。

现在 Angular Material 覆盖带有这样的指令和事件监听器。

              <ng-template
              cdkConnectedOverlay
              [cdkConnectedOverlayOrigin]="trigger"
              [cdkConnectedOverlayOpen]="isOpen"
              [cdkConnectedOverlayHasBackdrop]="isOpen"
              [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop-cs'"
              (backdropClick)="isOpen = !isOpen"
                >   
                content to be shown on overlay
            </ng-template>

【讨论】：