Angular 角度4下拉菜单单击“远离”关闭

我这里有一个演示-

我有一个下拉菜单，点击按钮时打开

我想在你点击其他地方时关闭菜单

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

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

控制台日志在事件发出之前工作，但如何使用它关闭菜单

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

import{Directive，EventEmitter，ElementRef，HostListener，Output}来自“@angular/core”；
@指令（{选择器：'[ClickWhere]'}）
导出类clickelsewhere指令{
@输出（）单击别处=新建EventEmitter（）；
构造函数（私有elementRef:elementRef）{}
@HostListener（'文档：单击'，['$event']））
公共onDocumentClick（事件：MouseeEvent）：无效{
const targetElement=event.target作为HTMLElement；
//检查单击是否在元素外部
if（targetElement&！this.elementRef.nativeElement.contains（targetElement））{
console.log（事件）
这个。点击别处。发射（事件）；
}
}
}

您必须订阅指令的事件，例如：

(clickElsewhere)="closeDropdown()"

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

以下是更新的演示：