Angular中mat-menu内ngx-color-picker选色后自动关闭问题求助

算力阿峰

2026-6-16

问题原因

Angular Material的mat-menu默认通过监听mousedown事件触发关闭逻辑，当点击ngx-color-picker的选择面板或内部元素时，事件会冒泡到mat-menu的全局监听，导致菜单意外关闭。

解决方案

1. 阻止菜单内容区域的事件冒泡

将原本的(click)事件替换为(mousedown)事件阻止冒泡，因为mat-menu的关闭逻辑基于mousedown触发：

<div (mousedown)="$event.stopPropagation()" id="cnvs_grd_menu">
  <!-- 颜色选择器代码 -->
</div>

2. 配置ngx-color-picker忽略相关元素

完善[cpIgnoredElements]属性，加入mat-menu内容区域和颜色选择器弹窗的类，避免事件被误触发：

<div type="text" class="form-control color-input pull-right custom-picker" 
     [cpPosition]="'bottom'"
     [cpOutputFormat]="'hex'" 
     [(colorPicker)]="clr.color" 
     id="{{'grd_clr'+i}}"
     [style.background]="clr.color" 
     (cpSliderDragEnd)="changeGradientColor(clr.color,i)" 
     (cpInputChange)="changeGradientColor(clr.color,i)" 
     [cpIgnoredElements]="['.mat-menu-content', '.color-picker-popup']">
</div>

注：.color-picker-popup是ngx-color-picker默认的弹窗容器类，若自定义了弹窗样式，替换为对应的类名即可。

3. 可选：禁用mat-menu内部点击关闭（按需使用）

如果需要点击菜单内部其他区域也不关闭菜单，可给mat-menu添加[closeOnClick]="false"属性（Angular Material 15+支持）：

<mat-menu #gradientPopup="matMenu" yPosition="above" xPosition="before" [overlapTrigger]="false" 
          class="text-gradient-popup" [closeOnClick]="false">
  <!-- 菜单内容 -->
</mat-menu>

这种情况需要手动添加关闭菜单的逻辑（比如添加"确定"按钮，点击时调用gradientPopup.close()）。

完整修改后的代码

<mat-menu #gradientPopup="matMenu" yPosition="above" xPosition="before" [overlapTrigger]="false" 
          class="text-gradient-popup">
 <div (mousedown)="$event.stopPropagation()" id="cnvs_grd_menu">
  <div class="gredient-spead-items d-flex justify-content-between align-items-center my-2 txt-geadient-clr-picker h-55 position-relative"
                      *ngFor="let clr of gradientArray; let i = index; trackBy: trackBgGradient">
                      <div type="text" class="form-control color-input pull-right custom-picker" [cpPosition]="'bottom'"
                        [cpOutputFormat]="'hex'" [(colorPicker)]="clr.color" id="{{'grd_clr'+i}}"
                        [style.background]="clr.color" (cpSliderDragEnd)="changeGradientColor(clr.color,i)" (cpInputChange)="changeGradientColor(clr.color,i)" 
                        [cpIgnoredElements]="['.mat-menu-content', '.color-picker-popup']"></div>
    </div>
 </div>
</mat-menu>

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