Angular中如何动态实现mat-menu菜单避免重复定义按钮与点击事件？

API 探路者

2026-10-3

完全可以通过配置化+循环渲染的方式简化代码，具体实现如下：

步骤1：在组件TS文件中定义菜单配置数组

你可以把所有菜单项的参数、禁用条件、显示文本都统一抽到一个配置数组中，示例代码如下：

// 如果禁用条件依赖的变量会动态变化，建议用getter定义配置，保证状态实时更新
get dealMenuItems() {
  return [
    {
      dealType: this.DEAL_TYPES.AC,
      label: 'Portfolio Management - Approval to Close',
      disabled: !this.testID
    },
    {
      dealType: this.DEAL_TYPES.PMT,
      label: 'Portfolio Management - Termination Option',
      disabled: !this.pmRId
    },
    {
      dealType: this.DEAL_TYPES.PMR,
      label: this.DEAL_TYPES.PMR,
      disabled: !this.leaseId
    }
  ]
}

注意：如果你的DEAL_TYPES是外部导入的枚举/常量，需要先在组件中赋值给实例属性，才能在配置中正常访问。

步骤2：替换原有模板代码，用*ngFor循环渲染菜单项

直接在mat-menu内部循环遍历配置数组即可，不需要再重复编写button标签：

<mat-menu #createDealMenu="matMenu" xPosition="before" yPosition="below">
  <button
    *ngFor="let item of dealMenuItems"
    [disabled]="item.disabled"
    (click)="createDeal(item.dealType)"
    mat-menu-item
  >
    {{item.label}}
  </button>
</mat-menu>