Question

我创建了一个类似OverlayPanel的组件，因此可以在其中放置更多点击或其他操作。但是，当我在叠加层外部单击或在叠加层中单击时，此退出不会一直停留在那里，只有当我单击按钮时，才会消失。

我喜欢这样创建的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>

Answer 1

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

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

    this.active=false;
  }

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

Answer 2

您可以按照https://www.npmjs.com/package/ng-click-outside所述使用ng-click-outside模块和我一起工作在角度8很好

当我在框外或Angular 4框中单击时，隐藏overlaypanel。

2 个答案: