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

【问题标题】：Angular 8 how to hide the dropdown menu when clicking outside the menuAngular 8如何在菜单外单击时隐藏下拉菜单
【发布时间】：2020-01-28 10:05:55
【问题描述】：

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

我尝试了下面的代码，但即使我点击下拉菜单中的元素，它也会隐藏

<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>

【问题讨论】：

标签： angular typescript

【解决方案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 语句可确保您在单击下拉菜单或下拉切换元素时不会关闭下拉菜单。

【讨论】：

还有其他方法可以解决这个问题吗？
此解决方案适用于我的项目范围，我不确定是否有更好的方法来实现相同的结果

【解决方案2】：

那么 (click)="toggle()"

当你点击菜单时会隐藏它，当你在菜单外点击时 (blur)="toggle()" 会隐藏它。您决定要继续绑定到哪个操作。

【讨论】：

当使用 click 它隐藏菜单时只有我点击工具按钮但模糊即使我点击下拉菜单中的任何元素它隐藏下拉菜单而不执行任何功能