Question

在下拉菜单之外单击时，我想隐藏自定义下拉菜单。

我尝试了以下代码，但是即使我在下拉菜单中单击某个元素，它也会隐藏

<button class="btn btn-primary btn-sm mt-1"  type="button" id="dropdownMenuButton" data-toggle="dropdown" (click)="toggle()" (blur)="toggle()" aria-haspopup="true"
                aria-expanded="false">
                Tools
              </button>

Answer 1

这可以通过在窗口上创建一个事件来实现，如果用户单击的位置不是下拉/下拉切换按钮，则该事件将切换连接到下拉列表的布尔值，例如：

@ViewChild('dropdown', {static: false}) protected dropdown: ElementRef;
@ViewChild('toggledropdown', {static: false}) protected toggleDropdown: ElementRef;
...
constructor(private renderer: Renderer2, protected router: Router) {
  this.renderer.listen('window', 'click', (e: Event) => {
    if (e.target !== this.dropdown.nativeElement && !this.toggleDropdown.nativeElement.contains(e.target)) {
       this.dropdownOpened = false;
    }
  });
}

其中的if语句可确保您在单击下拉列表或下拉切换元素时不会关闭下拉列表。

Answer 2

好（click）=“ toggle（）”

将在您单击菜单时将其隐藏，而（blur）=“ toggle（）”将在您单击菜单之外时将其隐藏。您可以决定要继续绑定到哪个动作。

Angular 8在菜单外单击时如何隐藏下拉菜单

2 个答案: