javascript Angular 5 Material Multiple mat-menu

Angular 5 Material Multiple mat-menu

提问by Artanis Zeratul

I am quite new to Angular 5 and have just started learning it.

Recently, I have been trying to create a menu bar with multiple menus for my app using Angular 5 Material.
The menu will be triggered/opened during mouse enter and closed when the mouse leaves the menu.
My problem is that everytime the mouse mouse hovers to the first menu it loads the menu items of the 2nd menu.

Here is a screenshot of the problem:


Here are my codes:
mainmenu.component.html:

我对 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:

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();
  }
}

I also tried this: @ViewChild('menu1') matMenuTrigger: MatMenuTrigger;but I am getting errors.
Your opinions and advices are very much appreciated!


Thanks,
Artanis Zeratul

References:

我也试过这个：@ViewChild('menu1') matMenuTrigger: MatMenuTrigger;但我收到错误。
非常感谢您的意见和建议！


谢谢，
Artanis Zeratul

参考文献：

• https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App
• How to make Material Design Menu (mat-menu) hide on mouseleave

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

回答by László Leber

The correct solution for this problem:

此问题的正确解决方案：

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

//And call:

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

回答by non_tech_guy

I had the same issue.

我遇到过同样的问题。

Create two separate components, each will then contain its own mat-menu and will not affect the other.

创建两个单独的组件，然后每个组件都将包含自己的 mat-menu 并且不会影响另一个。

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

回答by non_tech_guy

I have two matmenus in my toolbar each one is a separate component and triggers a separate matmenu.

我的工具栏中有两个 matmenus，每个都是一个单独的组件并触发一个单独的 matmenu。

See images below:

见下图：

Here is my notifications component(component 1 in the image above) In my editor view :

这是我的通知组件（上图中的组件 1）在我的编辑器视图中：

In my notifications.component.html file :

在我的notifications.component.html 文件中：

<button mat-icon-button [matMenuTriggerFor]="notificationsMenu" (mouseover)="openNotifications()">
  <mat-icon class="material-icons ele-text-color-grey">notifications</mat-icon>
</button>

<mat-menu #notificationsMenu="matMenu" [overlapTrigger]="false"></mat-menu>

I don't think it is possible to have two in one component but I hope this helps.

我认为不可能将两个组件合二为一，但我希望这会有所帮助。

回答by Madhukar Kumbhar

<ul class="navbar-nav ml-auto">
  <li class="nav-item dropdown">
      <button mat-button [matMenuTriggerFor]="admin">ADMIN</button>
      <mat-menu #admin="matMenu">
        <button mat-menu-item>User Management</button>
      </mat-menu>
  </li>
  <li class="nav-item dropdown">
      <button mat-button [matMenuTriggerFor]="profile">PROFILE</button>
      <mat-menu #profile="matMenu">
        <button mat-menu-item>Change Password</button>
        <button mat-menu-item>Logout</button>
      </mat-menu>
  </li>