mat-menu内嵌mat-radio-button无法获焦 添加mat-menu-item指令报错

冲突根因 #

不要在同一个DOM元素上同时绑定mat-menu-item指令和mat-radio-button组件，二者都是Angular Material的宿主绑定指令，会触发多重组件匹配报错。

可行解决方案 #

方案1：嵌套结构实现（改动最小，保留radio样式） #

将mat-radio-button放在mat-menu-item的内容区域，仅让外层的mat-menu-item响应菜单的键盘导航逻辑，手动做事件联动即可：

<mat-menu #optionMenu="matMenu">
  <!-- 语言切换单选组 -->
  <mat-radio-group [(ngModel)]="currentLang">
    <button 
      mat-menu-item
      role="menuitemradio"
      [attr.aria-checked]="currentLang === 'zh'"
      (click)="zhRadio.click()"
      #langZhItem
    >
      <mat-radio-button 
        #zhRadio 
        [value]="'zh'"
        tabindex="-1"
        (keydown.enter)="langZhItem._triggerAction()"
        (keydown.space)="langZhItem._triggerAction()"
      >
        中文
      </mat-radio-button>
    </button>
    <button 
      mat-menu-item
      role="menuitemradio"
      [attr.aria-checked]="currentLang === 'en'"
      (click)="enRadio.click()"
      #langEnItem
    >
      <mat-radio-button 
        #enRadio 
        [value]="'en'"
        tabindex="-1"
        (keydown.enter)="langEnItem._triggerAction()"
        (keydown.space)="langEnItem._triggerAction()"
      >
        英文
      </mat-radio-button>
    </button>
  </mat-radio-group>

  <!-- 其他普通菜单选项 -->
  <button mat-menu-item (click)="openSetting()">设置</button>
  <button mat-menu-item (click)="logout()">退出登录</button>
</mat-menu>

代码说明：

• 给mat-radio-button加tabindex="-1"，避免其单独捕获焦点，统一由外层mat-menu-item响应菜单的上下箭头导航逻辑
• 补充role="menuitemradio"和aria-checked属性，适配读屏设备的无障碍识别
• 点击菜单选项时触发内部radio的选中事件，按回车/空格选中radio时同步触发菜单的选中动作，双向联动逻辑完全对齐普通菜单选项

方案2：自定义选中样式（无障碍适配成本最低） #

如果不需要严格保留mat-radio-button的默认样式，可以直接用mat-menu-item实现单选逻辑，完全规避指令冲突：

<mat-menu #optionMenu="matMenu">
  <button 
    mat-menu-item 
    role="menuitemradio"
    [attr.aria-checked]="currentLang === 'zh'"
    (click)="currentLang = 'zh'"
  >
    <mat-icon *ngIf="currentLang === 'zh'">check</mat-icon>
    中文
  </button>
  <button 
    mat-menu-item 
    role="menuitemradio"
    [attr.aria-checked]="currentLang === 'en'"
    (click)="currentLang = 'en'"
  >
    <mat-icon *ngIf="currentLang === 'en'">check</mat-icon>
    英文
  </button>

  <button mat-menu-item (click)="openSetting()">设置</button>
  <button mat-menu-item (click)="logout()">退出登录</button>
</mat-menu>

该方案天然继承mat-menu-item的所有键盘交互能力，不需要额外处理焦点和事件联动，适配成本最低。

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