Question

我在这里有一个演示 - https://stackblitz.com/edit/angular-lewrxv?file=app%2FClickElsewhereDirective.ts

我有一个下拉菜单，单击该按钮时会打开。

我想点击其他任何地方时关闭菜单。

当我在菜单外单击时，我正在使用指令发出事件。

控制台日志在发出事件之前有效，但如何使用它来关闭菜单。

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

@Directive({ selector: '[clickElsewhere]' })

export class ClickElsewhereDirective {
  @Output() clickElsewhere = new EventEmitter<MouseEvent>(); 

  constructor(private elementRef: ElementRef) {}

  @HostListener('document:click', ['$event'])
  public onDocumentClick(event: MouseEvent): void {
    const targetElement = event.target as HTMLElement;

      // Check if the click was outside the element
      if (targetElement && !this.elementRef.nativeElement.contains(targetElement)) {
         console.log(event) 
         this.clickElsewhere.emit(event);
      }
  }
}

Answer 1

您必须订阅指令的事件，如下所示：

(clickElsewhere)="closeDropdown()"

您可能需要调整div大小，边距等，但它会起作用。

以下是更新的演示： https://stackblitz.com/edit/angular-qumejg

Angular 4下拉菜单点击即可关闭

1 个答案: