Angular 5 Material Multiple mat-menu [英] Angular 5 Material Multiple mat-menu

问题描述

我对 Angular 5 还是很陌生，刚刚开始学习它.

最近，我一直在尝试使用 Angular 5 Material 为我的应用程序创建一个带有多个菜单的菜单栏.
鼠标进入时会触发/打开菜单，鼠标离开菜单时会关闭菜单.
我的问题是，每次鼠标悬停到第一个菜单时，它都会加载第二个菜单的菜单项.

问题截图如下:


这是我的代码:
ma​​inmenu.component.html:

<button mat-button [matMenuTriggerFor]="menu1"(mouseenter)="openMyMenu()">Trigger1<mat-menu #menu1="matMenu"overlapTrigger="false"><span (mouseleave)="closeMyMenu()"><button mat-menu-item>项目 1</button><button mat-menu-item>项目 2</button></span></mat-menu>
<div><button mat-button [matMenuTriggerFor]="menu2"(mouseenter)="openMyMenu()">Trigger2<mat-menu #menu2="matMenu"overlapTrigger="false"><span (mouseleave)="closeMyMenu()"><button mat-menu-item>项目 3</button><button mat-menu-item>项目 4</button></span></mat-menu>

ma​​inmenu.component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';从@angular/material"导入 {MatMenuTrigger}@成分({选择器:应用程序主菜单"，templateUrl: './mainmenu.component.html',styleUrls: ['./mainmenu.component.css']})导出类 MainmenuComponent 实现 OnInit {@ViewChild(MatMenuTrigger) matMenuTrigger: MatMenuTrigger;构造函数(){}ngOnInit() {}openMyMenu() {this.matMenuTrigger.openMenu();}关闭我的菜单(){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) 在鼠标离开时隐藏

解决方案

我遇到了同样的问题.

创建两个独立的组件，每个组件都将包含自己的 mat-menu，不会影响另一个.

<div><button mat-button [matMenuTriggerFor]="menu1"(mouseenter)="openMyMenu()">Trigger1<mat-menu #menu1="matMenu"overlapTrigger="false"><span (mouseleave)="closeMyMenu()"><button mat-menu-item>项目 1</button><button mat-menu-item>项目 2</button></span></mat-menu>

<!-- component2 --><div><button mat-button [matMenuTriggerFor]="menu2"(mouseenter)="openMyMenu()">Trigger2<mat-menu #menu2="matMenu"overlapTrigger="false"><span (mouseleave)="closeMyMenu()"><button mat-menu-item>项目 3</button><button mat-menu-item>项目 4</button></span></mat-menu>

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:

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

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:

• 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

解决方案

I had the same issue.

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

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

这篇关于Angular 5 Material Multiple mat-menu的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！