Angular中动态设置mat-menu模板引用变量的问题

你遇到的问题本质是Angular的模板引用变量是编译时静态确定的，没法用#{{option.trigger}}这种插值表达式动态生成变量名，所以这种写法看似没报错，但实际上根本不会创建你想要的命名模板变量。

下面给你两种可行的实现方案：

方案一：通过ViewChildren关联触发器与菜单 #

这种方式通过统一获取所有菜单实例，再根据trigger字段匹配关联，是最直接的解决思路：

1. 组件中定义ViewChildren获取所有菜单
   在你的组件.ts文件中，添加ViewChildren装饰器来获取页面上所有的MatMenu实例：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { MatMenu } from '@angular/material/menu';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourMenuComponent {
  // 示例菜单配置，替换成你的JSON数据
  menuOptions = [
    { trigger: 'accueil', label: '首页', items: [{ label: '子项1' }, { label: '子项2' }] },
    { trigger: 'parametres', label: '设置', items: [{ label: '账户设置' }] }
  ];

  @ViewChildren(MatMenu) menus!: QueryList<MatMenu>;

  // 根据trigger字段查找对应的菜单实例
  getMenuByTrigger(trigger: string): MatMenu | undefined {
    return this.menus.find(menu => menu.id === trigger);
  }
}

2. 模板中动态生成菜单与触发器
   在模板里，给每个mat-menu绑定id为trigger值，然后触发器通过getMenuByTrigger方法关联对应菜单：

<!-- 动态生成菜单触发器 -->
<button 
  *ngFor="let option of menuOptions"
  mat-button 
  [matMenuTriggerFor]="getMenuByTrigger(option.trigger)"
>
  {{option.label}}
</button>

<!-- 动态生成菜单内容 -->
<mat-menu 
  *ngFor="let option of menuOptions"
  [id]="option.trigger"
>
  <button mat-menu-item *ngFor="let item of option.items">
    {{item.label}}
  </button>
</mat-menu>

方案二：利用菜单实例的trigger映射（简化版） #

如果你的菜单数据是固定或提前加载的，也可以直接在组件中创建一个trigger到菜单实例的映射，减少模板中的方法调用：

1. 组件中创建映射对象

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { MatMenu } from '@angular/material/menu';

@Component({
  // 组件元数据
})
export class YourMenuComponent implements AfterViewInit {
  menuOptions = [
    { trigger: 'accueil', label: '首页', items: [{ label: '子项1' }] },
    { trigger: 'parametres', label: '设置', items: [{ label: '账户设置' }] }
  ];

  @ViewChildren(MatMenu) menus!: QueryList<MatMenu>;
  menuMap = new Map<string, MatMenu>();

  ngAfterViewInit(): void {
    // 初始化trigger到菜单实例的映射
    this.menus.forEach(menu => {
      if (menu.id) {
        this.menuMap.set(menu.id, menu);
      }
    });
  }
}

2. 模板中直接通过映射关联

<button 
  *ngFor="let option of menuOptions"
  mat-button 
  [matMenuTriggerFor]="menuMap.get(option.trigger)"
>
  {{option.label}}
</button>

<mat-menu 
  *ngFor="let option of menuOptions"
  [id]="option.trigger"
>
  <button mat-menu-item *ngFor="let item of option.items">
    {{item.label}}
  </button>
</mat-menu>

注意事项 #

• 确保menuOptions中的trigger字段是唯一的，避免多个菜单使用同一个id导致匹配错误
• 如果菜单数据是异步加载的（比如从接口获取），需要在数据加载完成后再初始化映射，或者用*ngIf确保菜单渲染后再调用关联逻辑

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