如何解决mat-radio-button 没有在 mat-menu 内获得焦点
我有一个菜单,用户可以在其中更改语言,还有其他选项,例如退出和设置。我想使用键盘访问此菜单。它仅适用于 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
解决方法
您可以将单选按钮选项添加为单独的菜单项,并在选择菜单时以编程方式设置单选按钮的值。
代码如下
menu-icons-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>
并在您的组件中声明一个变量“语言”,如下所示
menu-icons-example.ts
@Component({
selector: 'menu-icons-example',templateUrl: 'menu-icons-example.html',styleUrls: ['./menu-icons-example.scss']
})
export class MenuIconsExample {
public language: any
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。