自定义Angular Material右键菜单引发页面卡顿问题排查

核心性能瓶颈 #

你的自定义指令确实存在明显的性能问题，根源在于全局事件监听的重复绑定：

• 每个MatContextMenuTrigger实例都会独立订阅document的click和contextmenu事件，当渲染50个列表项时，就会产生50组完全相同的全局事件监听。
• 每次页面触发点击或右键事件，50个订阅的回调逻辑都会执行一遍，大量重复的DOM判断和条件分支直接导致页面卡顿。
• 原生Material Menu没有这个问题，是因为它的全局事件监听是集中管理的（通过Overlay服务或单例逻辑共享监听），不会每个触发器都绑定一次。

优化方案 #

1. 用单例服务集中管理全局事件 #

创建一个全局服务，只绑定一次document级别的事件，所有指令实例共享这个监听，避免重复订阅。

全局监听服务代码

import { Injectable } from '@angular/core';
import { fromEvent, merge, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ContextMenuGlobalListenerService {
  private readonly globalEvents$ = new Subject<MouseEvent>();

  constructor() {
    // 仅绑定一次全局事件
    merge(
      fromEvent(document, 'contextmenu'),
      fromEvent(document, 'click')
    ).subscribe(event => this.globalEvents$.next(event as MouseEvent));
  }

  getGlobalEvents() {
    return this.globalEvents$.asObservable();
  }
}

2. 修改自定义指令，移除重复监听 #

重构指令逻辑，依赖全局服务获取事件，同时简化不必要的私有方法重写。

优化后的指令代码

import { FlexibleConnectedPositionStrategy } from '@angular/cdk/overlay'
import { Directive, HostListener, Input, Inject, OnInit, OnDestroy } from '@angular/core'
import { MatMenuPanel, _MatMenuTriggerBase } from '@angular/material/menu'
import { Subscription } from 'rxjs'
import { ContextMenuGlobalListenerService } from './context-menu-global-listener.service'

@Directive({
  selector: `[matContextMenuTriggerFor]`,
  host: {
    'class': 'mat-menu-trigger',
  },
  exportAs: 'matContextMenuTrigger',
})
export class MatContextMenuTrigger extends _MatMenuTriggerBase implements OnInit, OnDestroy {
  private lastMouseEvent: MouseEvent | null = null
  private hostElement: EventTarget | null = null
  private globalEventSub: Subscription | null = null

  @Input('matContextMenuTriggerFor')
  get menu_again () {
    return this.menu!
  }
  set menu_again (menu: MatMenuPanel) {
    this.menu = menu
  }

  constructor(
    @Inject(ContextMenuGlobalListenerService) private globalListenerService: ContextMenuGlobalListenerService
  ) {
    super();
  }

  ngOnInit() {
    // 订阅全局服务的事件流，仅一次绑定
    this.globalEventSub = this.globalListenerService.getGlobalEvents().subscribe(event => {
      if (this.menuOpen) {
        const target = event.target as HTMLElement
        if (target.classList.contains('cdk-overlay-backdrop')) {
          event.preventDefault()
          this.closeMenu()
        } else if (target !== this.hostElement) {
          this.closeMenu()
        }
      }
    })
  }

  // 简化mousedown处理，仅响应左键
  _handleMousedown(event: MouseEvent): void {
    this.lastMouseEvent = event;
    if (event.button === 0) {
      super._handleMousedown(event);
    }
  }

  // 空实现，避免左键触发菜单
  _handleClick(): void { }

  @HostListener('contextmenu', ['$event'])
  _handleContextMenu(event: MouseEvent): void {
    this.lastMouseEvent = event
    this.hostElement = event.target
    if (event.shiftKey) return
    event.preventDefault()
    this.openMenu()
  }

  // 重写openMenu设置位置，替代不安全的私有方法重写
  override openMenu(): void {
    super.openMenu();
    const overlayRef = this['_overlayRef'];
    if (overlayRef && this.lastMouseEvent) {
      const positionStrategy = overlayRef.getConfig().positionStrategy as FlexibleConnectedPositionStrategy;
      positionStrategy.setOrigin({ x: this.lastMouseEvent.clientX, y: this.lastMouseEvent.clientY })
        .withViewportMargin(10);
      overlayRef.updatePosition();
    }
  }

  ngOnDestroy() {
    this.globalEventSub?.unsubscribe();
    this.hostElement = null;
    super.ngOnDestroy();
  }
}

3. 额外优化点 #

• 移除了原代码中对私有方法_setPosition的重写，改用重写openMenu的方式设置菜单位置，避免依赖Angular Material内部未公开的API，提升代码稳定性。
• 简化了_handleMousedown的逻辑，仅处理左键点击，减少不必要的事件对象篡改。

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