Angular 5 Material Multiple mat-menu

Question

我是 Angular 5 的新手，刚刚开始学习它。

最近，我一直在尝试使用 Angular 5 Material 为我的应用程序创建一个包含多个菜单的菜单栏。

菜单将在鼠标进入期间触发/打开，并在鼠标离开菜单时关闭。

我的问题是，每次鼠标鼠标悬停在第一个菜单时，它都会加载第二个菜单的菜单项。

这是问题的屏幕截图：

这是我的代码：

主菜单.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>

主菜单.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; 但我收到错误。

非常感谢您的意见和建议！

谢谢，

阿塔尼斯泽拉图

参考：

• https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App
• 如何使 Material Design 菜单（mat-menu）隐藏在 mouseleave 上

原文由 Artanis Zeratul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到过同样的问题。

创建两个独立的组件，每个组件都将包含自己的垫子菜单，并且不会影响另一个。

 <!-- component1 -->
<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>

<!-- component2 -->
<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>

原文由 nontechguy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

此问题的正确解决方案：

 @ViewChildren(MatMenuTrigger) trigger: QueryList<MatMenuTrigger>;

//And call:

me.trigger.toArray()[indexOfMenu].openMenu();

原文由 László Leber 发布，翻译遵循 CC BY-SA 4.0 许可协议