以下是一个示例解决方法,使用Angular Material和Angular CDK中的Overlay模块来实现鼠标移出按钮时隐藏菜单:
npm install @angular/material @angular/cdk
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
export class YourComponent {
@ViewChild('button') button: ElementRef;
overlayRef: OverlayRef;
portal: TemplatePortal;
}
constructor(private overlay: Overlay, private elementRef: ElementRef) { }
ngOnInit() {
this.overlayRef = this.overlay.create({
hasBackdrop: true,
backdropClass: 'cdk-overlay-transparent-backdrop',
positionStrategy: this.overlay.position()
.flexibleConnectedTo(this.button.nativeElement)
.withPositions([
{
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top',
offsetY: 8
}
])
});
this.portal = new TemplatePortal(this.menuTemplate, this.elementRef);
}
其中,menuTemplate是一个指向菜单模板的引用。你可以在组件中定义一个
,并将其引用赋给menuTemplate。
showMenu() {
if (!this.overlayRef.hasAttached()) {
this.overlayRef.attach(this.portal);
}
}
hideMenu() {
if (this.overlayRef.hasAttached()) {
this.overlayRef.detach();
}
}
现在,当鼠标移入按钮时,菜单将显示,当鼠标移出按钮时,菜单将隐藏。