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

Question

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

我只想一次看到一个可见的下拉列表实例。我的逻辑负责 closing/opening 下拉列表：

@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);
}

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

Answer 1

指令中的 $event.stopPropagation(); 停止传播要由其他下拉组件处理的事件。

您应该让事件传播并找到另一种方法来关闭下拉列表。可能在指令代码中？

I updated your example to fix the reported issue.

您可以找到更优雅的修复方法。

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

Creating custom dropdown component in Angular

angular-directive

angular