在Angular中,当您在mat-menu
外部单击时,可以通过以下步骤停止其关闭:
mat-menu
元素上添加一个#menu
模板引用变量,以便在组件中引用它。<button [matMenuTriggerFor]="menu">Open Menu</button>
<mat-menu #menu="matMenu">
<!-- Menu content -->
</mat-menu>
@ViewChild
装饰器来获取对mat-menu
的引用,并监听外部单击事件。import { Component, ViewChild, ElementRef, HostListener } from '@angular/core';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
@ViewChild('menu') menu: ElementRef;
@HostListener('document:click', ['$event.target'])
onClick(target: any) {
const menuElement = this.menu.nativeElement;
if (!menuElement.contains(target)) {
// Stop menu from closing
event.stopPropagation();
}
}
}
@HostListener
装饰器用于监听整个文档的点击事件。当点击事件发生时,我们检查点击的目标元素是否在mat-menu
内部。如果不在内部,我们调用event.stopPropagation()
方法来阻止菜单关闭。这样,当您在mat-menu
外部单击时,菜单将不会关闭。
请注意,以上代码示例中未提及腾讯云相关产品和链接地址,因为与问题的上下文无关。如果您需要了解腾讯云的相关产品和服务,请参考腾讯云官方文档或咨询腾讯云官方支持。
领取专属 10元无门槛券
手把手带您无忧上云