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

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

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

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

工具

井（单击）=“切换（）

---

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

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

@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语句用于确保在单击下拉菜单或下拉切换元素时不会关闭下拉菜单。

当使用“单击”时，仅当我单击“工具”按钮时，它会隐藏菜单，但使用“模糊”时，即使我单击下拉菜单内的任何元素，它也会隐藏下拉菜单，而不执行任何功能。是否有解决此问题的其他方法？此解决方案适用于我的项目范围，我不确定是否有更好的方法实现相同的结果