在Angular中如何实现点击context menu卡片外部区域自动关闭菜单？

第一步：修复点击穿透问题 #

你现在背景按钮能响应点击是因为仅添加了模糊效果，没有遮罩层阻挡下层元素的点击事件。你可以在组件样式中添加以下代码，给菜单容器做全屏透明遮罩，直接拦截下层的点击：

.context-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 1000; /* 层级要高于页面其他普通元素 */
  /* 调整菜单实际显示的位置，示例为右上角对齐，可按需修改 */
  display: flex;
  justify-content: flex-end;
  padding: 1rem 2rem 0 0;
}
/* 菜单本体样式，层级高于父容器即可 */
.context-menu nb-menu {
  background: #fff;
  z-index: 1001;
  width: max-content;
}

第二步：实现点击外部关闭逻辑 #

推荐两种可直接复用的实现方案，按需选择即可：

方案1：模板事件实现（代码最少） #

基于上面的全屏遮罩样式，直接通过模板事件冒泡逻辑实现，不需要额外加全局监听：

1. 修改HTML代码：

<!-- 给点击事件传递事件对象，后续阻止冒泡用 -->
<nb-user  (click)="openMenuBar($event)" [onlyPicture]="userPictureOnly" [name]="user?.userName">
</nb-user>

<!-- 点击全屏遮罩层直接触发关闭 -->
<nb-card class="context-menu" (click)="closeMenu()">
  <!-- 点击菜单本身阻止冒泡，不会触发父容器的关闭事件 -->
  <nb-menu *ngIf="menuOpened" (click)="$event.stopPropagation()" [items]="userMenu" autoCollapse="true">
  </nb-menu> 
</nb-card>

2. 修改.ts代码，抽离关闭逻辑，优化打开逻辑：

menuOpened = false;

openMenuBar(event: MouseEvent) {
  // 阻止头像点击事件冒泡，避免刚打开就触发关闭
  event.stopPropagation();
  this.menuOpened = !this.menuOpened;
  if (this.menuOpened) {
    (document.querySelector('nb-layout-column') as HTMLElement).style.filter = 'blur(10px)';
  } else {
    this.closeMenu();
  }
}

// 抽离公共关闭逻辑
private closeMenu() {
  this.menuOpened = false;
  (document.querySelector('nb-layout-column') as HTMLElement).style.filter = 'unset';
}

方案2：全局点击监听实现（兼容性更好） #

如果不希望修改模板事件，也可以用HostListener监听全局点击判断点击位置：

1. 先导入HostListener装饰器

import { HostListener } from '@angular/core';

2. 在组件类中添加全局监听逻辑，其他代码和方案1一致：

// 监听全局document点击事件
@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent) {
  if (!this.menuOpened) return;
  const clickTarget = event.target as HTMLElement;
  const userElement = document.querySelector('nb-user');
  const menuElement = document.querySelector('.context-menu nb-menu');
  // 点击位置不在头像和菜单内部时，触发关闭
  if (!userElement?.contains(clickTarget) && !menuElement?.contains(clickTarget)) {
    this.closeMenu();
  }
}

内容的提问来源于stack exchange，提问作者hanushic