mat-radio-button 没有在 mat-menu 中获得焦点

Question

我有一个菜单，用户可以在其中更改语言，还有其他选项，例如注销和设置。我想使用键盘访问此菜单。该问题仅适用于 mat-menu-item 而不适用于 mat-radio-buttons。单选按钮根本没有获得焦点。

将 mat-menu-item 指令添加到 mat-radio-button 时，出现以下错误：

More than one component is matched on this element: MatMenuItem ([mat-menu-item]) and MatRadioButton (mat-radio-button)

这是一个stackblitz

Answer 1

您可以将单选按钮选项添加为单独的菜单项，并在选择菜单时以编程方式设置单选按钮的值。

代码如下

菜单图标-exampe.html

<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item style="height: fit-content;" (click)="language=1">
  <mat-radio-group class="grid">
    <mat-radio-button value="1" [checked]="language==2">Option 1</mat-radio-button>

  </mat-radio-group>
  </button>
   <button mat-menu-item style="height: fit-content;" (click)="language=2">
  <mat-radio-group class="grid" >
    <mat-radio-button value="2" [checked]="language==2">Option 2</mat-radio-button>

  </mat-radio-group>
  </button>
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item>
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-menu>

并在您的组件中声明一个变量“语言”，如下所示

菜单图标-example.ts

@Component({
  selector: 'menu-icons-example',
  templateUrl: 'menu-icons-example.html',
  styleUrls: ['./menu-icons-example.scss']
})
export class MenuIconsExample {
  public language: any
}

mat-radio-button 没有在 mat-menu 中获得焦点

mat-radio-button not getting focus inside a mat-menu

angular

angular-material

web-accessibility