Angular 打开第二个/文档时关闭下拉列表。单击被单击阻止5

我试图为下拉列表创建一个指令，只要我使用单个指令，它就会像一个符咒一样工作。我可以使用以下代码点击外部下拉列表：

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

当创建了两个下拉列表时，就会出现问题。我希望在打开第二个下拉列表时关闭第一个下拉列表，但是当我单击第二个下拉列表时，只会触发“单击”事件，而不会执行“document.click”。我希望这两个事件都会发生，除非我在单击时显式使用preventDefault，但显然这是自动发生的

---

在Angular 5中，当第二个下拉列表打开时，关闭第一个下拉列表的正确方法是什么？

也许您可以尝试以下方法：

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

因此，不必让两个事件相互冲突，而是让一个事件和两个逻辑片段精确地处理所需内容，具体取决于您是在元素内部还是外部单击。有道理吗

---

这是取自

如何创建一个可以在任何地方使用的指令

@Directive( {
    selector : '[clicked-outside]' ,
    host     : {
        '(document:click)' : 'onClick($event)',
        '(document:touch)' : 'onClick($event)',
        '(document:touchstart)' : 'onClick($event)'
    } 
} )
export class ClickedOutsideDirective {
    @Input( 'clicked-outside' ) callback : Function;

    constructor ( private _el : ElementRef ) {
    }

    private onClick ( event : any ) {
        if ( this.clickedOutside( event ) ) {
            if ( this.callback ) {
                this.callback();
            }
        }
    }

    private clickedOutside ( event : any ) {
        let clickedTarget = event.target;
        let host          = this._el.nativeElement;
        do {
            if ( clickedTarget === host ) {
                return false;
            }
            clickedTarget = clickedTarget.parentNode;
        } while ( clickedTarget );
        return true;
    }
}

您可以这样使用它：

@Component({
   selector:'your-dropdown',
   template:`
       <div class="your-dropdown-top-most-wrapper" [clicked-outside]="onClickOutSide"></div>

   `
})
export class YouDropdownComponent{


   public onClickOutSide = ()=>{


        this.closeMyDropdown()// this is your function that closes the dropdown
   }
}

@组件({
选择器：'your-dropdown'，
模板：`
`
})
导出类YouDropdownComponent{
公共onClickOutSide=（）=>{
this.closeMyDropdown（）//这是关闭下拉列表的函数
}
}

谢谢，但是如果（this.\u element.nativeElement.contains（event.target））{console.log（'click on'）；}，则不会触发“内部单击”->你是否有错误或者根本没有进入if？我的错，当我单击下拉列表时，这根本不会被触发。我将控制台日志放在它前面，当我单击下拉列表时它不会被触发。我尝试使用指令来实现这一点，但没有成功。我必须添加一个私有属性每次打开或关闭下拉菜单时，都要考虑到组件和标志，在单击另一个下拉菜单时考虑关闭它。