Question

我在点击时添加了一个“打开”类，打开下拉菜单。我是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;
    }

Answer 1

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

Answer 2

您可以添加@Component

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

functionClick {
    this.open = false 
}

如何在Angular 4中点击屏幕外的任何位置时关闭下拉列表

2 个答案: