在Angular 4屏幕上的任意位置单击外部时如何关闭下拉菜单答案

【问题标题】：How to close dropdown when click outside anywhere on screen in Angular 4在Angular 4屏幕上的任意位置单击外部时如何关闭下拉菜单
【发布时间】：2018-05-17 03:08:04
【问题描述】：

我在点击打开下拉菜单时添加了一个“打开”类。我 isOpen 作为布尔值，可以在单击时切换打开和关闭。它工作正常。问题是当我点击外部（屏幕上的任何位置）时下拉菜单不会关闭。它只在点击按钮时打开和关闭。这是代码：

********************
      HTML
********************

<div class="btn-group dropdown" [class.open]="isOpen">
   <button class="btn btn-default dropdown-toggle area-dropdown" (click)="onDropdownToggle()">
   <span class="eo-select-label ellipsis"> Select area size</span>
   <span aria-hidden="true" class="caret glyphicon></span>
   </button>
 <ul class="eo-dropdown-menu">
    <li class="li-employee-number-selector"> 5 - 50 Square meters </li>
    <li class="li-employee-number-selector"> 51 - 100 Square meters </li>
 </ul>
</div>

********************
     Component.ts
********************

    export class SellerFactoryProfileComponent implements OnInit {
      isOpen: boolean;

    constructor() { }

      ngOnInit() {
      }
      onDropdownToggle() {
        this.isOpen = !this.isOpen;
    }

【问题讨论】：

标签： angular typescript

【解决方案1】：

要监听窗口事件（例如单击），您必须在使用 @HostListener('document:click') 装饰器装饰的组件中添加事件监听器方法。

【讨论】：

【解决方案2】：

你可以添加你的@Component

selector: '<app-name>',
host: {
    '(document:click)': 'functionClick($event)',
  }

functionClick {
    this.open = false 
}

【讨论】：