Question

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

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

@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中创建自定义下拉组件

1 个答案: