在下拉列表外部单击时从元素中删除类 - Angular

问：

我正在处理一个下拉列表，里面有不同的子列表，当我单击页面的不同部分时，我试图关闭下拉列表，基本上是菜单中的任何地方。如果我单击页面中的任意位置，则应删除 css 类 show-list。如果我有一个打开的菜单并尝试打开另一个菜单，另一个应该关闭。我不知道怎么做，我尝试了不同的东西，但似乎没有任何效果。

法典

这个html结构是可重用的，所以我创建了一个指令文件：

指令文件

// If the click was inside the menu, toggle show-list
        if (menu.contains(clickedElement)) {
          this.childSelector.forEach((selector) => {
            const childMenus = parentLi.querySelectorAll(selector);
            childMenus.forEach((childMenu: Element) => {
              this.toggleMenu(childMenu, isButtonClicked);
            });
          });
        } else {
          // If the click was outside the menu, remove show-list from all menu levels
          this.removeAllShowListClasses(menu);
        }
      toggleMenu(menu: any, showSubList: boolean) {
        if (showSubList) {
          if (menu.classList.contains('show-list')) {
            this.renderer.removeClass(menu, 'show-list');
          } else {
            this.renderer.addClass(menu, 'show-list');
          }
        }
      }

      removeAllShowListClasses(element: Element) {
        const allChildrenWithShowList = element.querySelectorAll('.show-list');
        allChildrenWithShowList.forEach((child) =>
          this.renderer.removeClass(child, 'show-list')
        );
      }

Html 结构

<div Menu>
    <button>List Item</button>
    <ul>More code</ul>
</div>