在 Angular 中创建自定义下拉组件

我正在尝试创建自己的下拉组件。问题是，我的下拉列表有效，但我有一些使用此下拉列表的组件。当我点击他们的切换按钮时，会打开多个下拉菜单实例。为什么会这样？

这里是plunker

我希望一次只看到一个下拉列表实例。我负责关闭/打开下拉菜单的逻辑：

@HostListener('document:click', ['$event'])
clickout($event) {
  if (this.eRef.nativeElement.contains($event.target)) {
    console.log('clicked inside!');
  } else {
    console.log('clicked outside!');
    if (this.isOpen) {
      this.isOpen = false;
    }
  }
}

并切换：

@HostListener('click', ['$event'])
click($event) {
  const { offsetX, clientX, offsetY, clientY } = $event;
  const distances = {
    left: clientX - offsetX,
    top: clientY - offsetY
  };

  $event.stopPropagation();
  this.dropdown.toggle(distances);
}

当一个下拉列表已经打开时，如何防止打开另一个下拉列表实例？我想关闭它并在新的地方打开另一个。