在Angular Material中,当单击mat切换按钮后,mat-menu会自动关闭。如果想要停止mat-menu关闭,可以通过以下步骤实现:
<button mat-button [matMenuTriggerFor]="menu">切换按钮</button>
<mat-menu #menu="matMenu">
<!-- mat-menu的内容 -->
</mat-menu>
import { Component, ViewChild } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
@ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger;
stopMenuClose(event: MouseEvent): void {
event.stopPropagation();
}
}
<button mat-button [matMenuTriggerFor]="menu" (click)="stopMenuClose($event)">切换按钮</button>
通过以上步骤,当单击切换按钮时,mat-menu将不会关闭,而是保持打开状态。
领取专属 10元无门槛券
手把手带您无忧上云