javascript - Angular 5 Material Multiple mat-menu
问题描述
我对 Angular 5 很陌生,刚刚开始学习它。
最近,我一直在尝试使用 Angular 5 Material 为我的应用程序创建一个包含多个菜单的菜单栏。
菜单将在鼠标进入时触发/打开,在鼠标离开菜单时关闭。
我的问题是,每次鼠标悬停到第一个菜单时,它都会加载第二个菜单的菜单项。
这是问题的屏幕截图:
这是我的代码:mainmenu.component.html:
<div>
<button mat-button [matMenuTriggerFor]="menu1"
(mouseenter)="openMyMenu()">Trigger1</button>
<mat-menu #menu1="matMenu" overlapTrigger="false">
<span (mouseleave)="closeMyMenu()">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</span>
</mat-menu>
</div>
<div>
<button mat-button [matMenuTriggerFor]="menu2"
(mouseenter)="openMyMenu()">Trigger2</button>
<mat-menu #menu2="matMenu" overlapTrigger="false">
<span (mouseleave)="closeMyMenu()">
<button mat-menu-item>Item 3</button>
<button mat-menu-item>Item 4</button>
</span>
</mat-menu>
</div>
mainmenu.component.ts:
import { Component, OnInit, ViewChild } from '@angular/core';
import {MatMenuTrigger} from '@angular/material'
@Component({
selector: 'app-mainmenu',
templateUrl: './mainmenu.component.html',
styleUrls: ['./mainmenu.component.css']
})
export class MainmenuComponent implements OnInit {
@ViewChild(MatMenuTrigger) matMenuTrigger: MatMenuTrigger;
constructor() { }
ngOnInit() {
}
openMyMenu() {
this.matMenuTrigger.openMenu();
}
closeMyMenu() {
this.matMenuTrigger.closeMenu();
}
}
我也试过这个:@ViewChild('menu1') matMenuTrigger: MatMenuTrigger;
但我遇到了错误。
非常感谢您的意见和建议!
谢谢,
Artanis Zeratul
参考资料:
- https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App
- 如何使 Material Design 菜单(mat-menu)隐藏在 mouseleave 上
解决方案
这个问题的正确解决方案:
@ViewChildren(MatMenuTrigger) trigger: QueryList<MatMenuTrigger>;
//And call:
me.trigger.toArray()[indexOfMenu].openMenu();
推荐阅读
- reactjs - 更改映射的组件属性
- reactjs - 如何映射对象
- ldap - 找不到 cn=module,cn=config 条目
- selenium - python selenium/unittest 检查值是否改变
- .net - 如何修复“Oracle.EntityFrameworkCore 没有实现”类型中的“方法 'get_Info”。
- java - 工件部署期间出错:注销 MBean 时出现问题:javax.management.InstanceNotFoundException
- asp.net-core - 如何将模型传输到 Blazor 服务器端中的 Razor 组件?
- javascript - 使用 Forge 对二进制数据进行 SHA256 哈希
- vb.net - 使用 VB.Net 2 读取和写入文本文件中的特定行
- javascript - 使用 setItem 设置多个状态值和使用 useEffect 这样做有什么区别?