现在,单击汉堡菜单时,我会得到一个下拉列表,但我需要在鼠标悬停在汉堡菜单上时使用,这里是堆栈闪电link。
答案 0 :(得分:1)
为mat按钮添加参考变量,用于在click
事件上触发mouseover
。
<button mat-icon-button
#matBtn
(mouseover)="matBtn._elementRef.nativeElement.click()"
[matMenuTriggerFor]="menu"
>
注意:我真的不喜欢访问这样的对象的“私有”属性,我的这种解决方案更多是一种解决方法,如果找不到其他解决方案,请使用此方法。
答案 1 :(得分:1)
您可以使用matMenuTrigger
指令
<button mat-icon-button [matMenuTriggerFor]="menu"
#menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()">
要隐藏菜单,请为菜单添加mouseleave
事件。
将所有菜单项捆绑在span
或div
标签内。然后将(mouseleave)
事件附加到它
<mat-menu #menu="matMenu" [overlapTrigger]="false">
<span (mouseleave)="menuTrigger.closeMenu()">
<button mat-menu-item>
<mat-icon>home</mat-icon>
<span>Home</span>
........
<mat-icon>exit_to_app</mat-icon>
<span>Logout</span>
</button>
</span>
</mat-menu>
分叉的DEMO
答案 2 :(得分:1)
MatMenuTrigger
此伪指令旨在与Mat-menu一起使用 标签。它负责切换提供的菜单的显示 实例。
<button #r="matMenuTrigger" mat-icon-button [matMenuTriggerFor]="menu" >
<mat-icon (mouseover)="open(r)" >menu</mat-icon>
</button>
示例:https://stackblitz.com/edit/example-angular-material-toolbar-menu-wrut3v
答案 3 :(得分:0)
app.component.html:
<mat-toolbar color="primary" >
<span class="fill-remaining-space">
<button #clickMe mat-icon-button [matMenuTriggerFor]="menu" (mouseenter)="clickOnHover()">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
<button mat-menu-item>
<mat-icon>home</mat-icon>
<span>Home</span>
</button>
<button mat-menu-item>
<mat-icon>people_outline</mat-icon>
<span>Connecting</span>
</button>
<button mat-menu-item>
<mat-icon>videocam</mat-icon>
<span>Let's talk</span>
</button>
<button mat-menu-item>
<mat-icon>exit_to_app</mat-icon>
<span>Logout</span>
</button>
</mat-menu>
</span>
<span class="fill-remaining-space">Application Title</span>
</mat-toolbar>
app.component.ts:
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
@ViewChild('clickMe') clickMe: any;
clickOnHover() {
this.clickMe._elementRef.nativeElement.click();
}
}
答案 4 :(得分:0)
希望这会有所帮助
使用(鼠标输入)功能 Angular-hover-stackblitz
答案 5 :(得分:0)
覆盖mouseover
事件并创建#menuTrigger
参考变量。这将解决您的问题。
<button mat-icon-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger"
(mouseover)="menuTrigger.openMenu()" >
我已经更新了您的stackblitz
答案 6 :(得分:0)
我知道我参加聚会很晚,但是以上这些对我来说都没有成功。我最终写了一条指令,所以为我解决了这个问题。
HoverDropDownDirective
list1 = [1,2,3,4,5,6,10]
ans = 0
for i,n in enumerate(list1):
if n > list1[ans]:
ans = i
return ans
应用模块
import { NgModule } from '@angular/core';
import { Directive, Input, ElementRef, OnInit } from '@angular/core';
import { MatMenuTrigger, _MatMenu } from '@angular/material';
@Directive({
selector: '[hoverDropDown]'
})
export class HoverDropDownDirective implements OnInit {
isInHoverBlock = false;
constructor(private el: ElementRef) {}
@Input() hoverTrigger: MatMenuTrigger;
@Input() menu: any;
ngOnInit() {
this.el.nativeElement.addEventListener('mouseenter', () => {
this.setHoverState(true);
this.hoverTrigger.openMenu();
const openMenu = document.querySelector(`.mat-menu-after.${this.menu._elementRef.nativeElement.className}`);
if (!openMenu) {
this.hoverTrigger.closeMenu();
return;
}
openMenu.addEventListener('mouseenter', () => {
this.setHoverState(true);
});
openMenu.addEventListener('mouseleave', () => {
this.setHoverState(false);
});
});
this.el.nativeElement.addEventListener('mouseleave', () => {
this.setHoverState(false);
});
}
private setHoverState(isInBlock: boolean) {
this.isInHoverBlock = isInBlock;
if (!isInBlock) {
this.checkHover();
}
}
private checkHover() {
setTimeout(() => {
if (!this.isInHoverBlock && this.hoverTrigger.menuOpen) {
this.hoverTrigger.closeMenu();
}
}, 50);
}
}
@NgModule({
declarations: [
HoverDropDownDirective
],
exports: [
HoverDropDownDirective
]
})
export class HoverDropDownDirectiveModule {}
HTML
import { HoverDropDownDirectiveModule } from '../../directives/hover-drop-down.directive';
imports: [
HoverDropDownDirectiveModule
]
2件事要注意:
<div *ngFor="let category of categories">
<button #menuTrigger="matMenuTrigger"
mat-button
[matMenuTriggerFor]="children"
(click)="navigateMain(category.Category)"
hoverDropDown
[menu]="children"
[hoverTrigger]="menuTrigger">
{{category.Category.Description}}
</button>
<mat-menu #children="matMenu" hasBackdrop="false">
<button mat-menu-item *ngFor="let sub of category.SubCategories" (click)="navigateSubCategory(sub)">{{sub.Description}}</button>
</mat-menu>
</div>
属性 hasBackdrop="false"
属性记录在Angular Material上。希望这对您有用...