如何在用户点击mat-menu外部区域时触发指定函数？

方法1：使用官方原生backdropClick事件（推荐） #

Angular Material 官方已经为mat-menu封装了外部遮罩点击的专属事件，不需要手动判断菜单状态或监听全局事件，直接绑定即可：

• 模板代码示例：

<!-- 菜单触发按钮 -->
<button mat-button [matMenuTriggerFor]="demoMenu">打开菜单</button>

<!-- 绑定backdropClick事件到你的自定义函数 -->
<mat-menu #demoMenu="matMenu" (backdropClick)="yourCustomFunction()">
  <button mat-menu-item>菜单选项1</button>
  <button mat-menu-item>菜单选项2</button>
</mat-menu>

• 组件TS代码示例：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  yourCustomFunction() {
    // 此处写你需要执行的逻辑
    console.log('用户点击了菜单外部区域');
  }
}

注意：该事件仅在用户点击菜单外部遮罩时触发，点击菜单内部的选项不会触发，完全匹配你的需求。

方法2：手动判断菜单状态+全局监听（适用于复杂逻辑场景） #

如果需要额外的自定义判断逻辑，可以手动获取菜单打开状态、监听全局点击事件实现：

检测菜单打开状态 #

可以通过MatMenuTrigger实例的menuOpen属性实时获取菜单状态，也可以通过menuOpened/menuClosed事件维护自定义状态变量：

• 模板代码示例：

<!-- 给触发按钮绑定trigger实例、菜单打开/关闭事件 -->
<button 
  mat-button 
  [matMenuTriggerFor]="demoMenu"
  #menuTrigger="matMenuTrigger"
  (menuOpened)="isMenuOpen = true"
  (menuClosed)="isMenuOpen = false"
>
  打开菜单
</button>

<mat-menu #demoMenu="matMenu">
  <button mat-menu-item>菜单选项1</button>
  <button mat-menu-item>菜单选项2</button>
</mat-menu>

监听外部点击事件 #

• 组件TS代码示例：

import { Component, ViewChild, HostListener } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('menuTrigger') menuTrigger!: MatMenuTrigger;
  isMenuOpen = false;

  // 监听全局document点击事件
  @HostListener('document:click', ['$event'])
  handleGlobalClick(event: MouseEvent) {
    // 先判断菜单是否处于打开状态
    if (!this.isMenuOpen) return;

    // 判断点击的元素是否在菜单内部或者菜单触发按钮上
    const clickTarget = event.target as HTMLElement;
    const isClickInside = clickTarget.closest('.mat-menu-panel, [mat-menu-trigger-for]');
    
    if (!isClickInside) {
      // 点击在菜单外部，执行你的自定义逻辑
      console.log('用户点击了打开状态的菜单外部区域');
    }
  }
}

内容的提问来源于stack exchange，提问作者Julio Rodríguez