同一页面上的angular 2指令的多个实例

Question

我在组件上有一个click-outside指令，该指令在页面上创建了多次。该组件具有我创建的下拉菜单，单击该按钮可将其关闭。问题是，当我有〜100个下拉菜单时，每个组件的click-outside指令都会被调用〜100次，这会导致打开下拉菜单的简单动作耗时太长。

这是指令：

import {Component, NgModule, VERSION, Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

@Directive({ 
  selector: '[appClickOutside]'
})
export class ClickOutsideDirective {
  @Output() clickOutside: EventEmitter<any> = new EventEmitter();

  constructor(private _elementRef: ElementRef) {
  }

  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const isClickedInside = this._elementRef.nativeElement.contains(targetElement);
    if (!isClickedInside) {
      this.clickOutside.emit(true);
    }
  }
}

有没有一种方法可以阻止该指令在所有下拉菜单中运行？

谢谢！