angular - 打开第二个时关闭下拉菜单/document.click被点击Angular 5阻止

Question

我正在尝试为下拉菜单创建一个指令，只要我使用单个指令，它就像一个魅力。我可以使用以下代码在下拉菜单外发现点击:

@HostListener('document:click', ['$event'])
  onDocumentClick(event: any): void {
    console.log("document click");
    // close
}
@HostListener('click')
  onClick(): void {
    console.log('click on ');  
    // toggle  
  }

当创建了 2 个下拉菜单时会出现问题。我想在打开第二个下拉菜单时关闭第一个下拉菜单，但是当我单击第二个下拉菜单时，只会触发“click”事件并且“document.click”不会被执行。我希望这两个事件都应该发生，除非我在点击时明确使用 preventDefault 但显然这是自动发生的。

Angular 5 中打开第二个下拉菜单时关闭第一个下拉菜单的正确方法应该是什么？

Answer 1

也许你可以尝试这样的事情:

 @HostListener('document:click', ['$event'])
  onClick(event) {
    if(this.eRef.nativeElement.contains(event.target)) {
      // toggle logic
    } else {
      // close logic
    }
}

因此，不是让两个事件相互冲突，而是让一个事件包含两个逻辑片段来准确处理您需要的内容，具体取决于您是在元素本身内部还是外部单击。说得通？

这取自 here