Angular 5 Material 多个垫子菜单

Question

我对 Angular 5 很陌生，刚开始学习。

最近，我一直在尝试使用 Angular 5 Material.
为我的应用创建一个包含多个菜单的菜单栏菜单在鼠标进入时为 triggered/opened，鼠标离开时关闭。
我的问题是，每次鼠标鼠标悬停在第一个菜单时，它都会加载第二个菜单的菜单项。

问题截图如下：

这是我的代码：
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; 但我收到错误。
非常感谢您的意见和建议！

谢谢，
阿塔尼斯泽拉图

参考文献：

https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App

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>

Answer 2

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

见下图：

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

在我的 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>

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

Answer 3

本题的正确解法：

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

//And call:

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

Answer 4

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

Answer 5

我有同样的问题，我通过使用@ViewChild装饰器

的read元数据属性解决了它

mainmenu.component.html

<button #menuBtn1 [matMenuTriggerFor]="menu1">Trigger1</button>
<button #menuBtn2 [matMenuTriggerFor]="menu2">Trigger2</button>

mainmenu.component.ts

@ViewChild('menuBtn1', { read: MatMenuTrigger, static: false}) menu1: MatMenuTrigger;
@ViewChild('menuBtn2', { read: MatMenuTrigger, static: false}) menu2: MatMenuTrigger;

foo() {
    this.menu1.openMenu(); // also closeMenu()
    this.menu2.openMenu();
}

诀窍是使用模板引用 menuBtn1 或 menuBtn2 并通过 read 属性指定您想要获得的是 MatMenuTrigger指令

NOTE: 我看到问题是指angular和angular-material 5.我用[=35测试了=] 8 但应该是一样的

Answer 6

此问题与angular中的元素引用有关，因此您不能直接在单个组件中使用多个mat-menu。

技巧是创建一个单独的组件来实现 mat-menu：例如，

垫-menu.component.html:

`<div>
    <span>
        <a (click)="openSelectMenu()">Menu
        <mat-icon>arrow_drop_down</mat-icon>
        <div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu1"></div>
        </a>
        <mat-menu #menu1="matMenu" overlapTrigger="false">
        <a mat-menu-item *ngFor="let menu of menuItems">{{menu}}</a></mat-menu>
    </span>
</div>`

垫-menu.component.ts

`@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;`
`menuItems=['1', '2', '3'];`

 `openSelectMenu() {
    this.trigger.openMenu();
 }`

现在您可以在任何组件中多次使用该组件。例如， app.component.html

`<app-menu></app-menu>
<app-menu></app-menu>`

它会起作用。

Angular 5 Material 多个垫子菜单

Angular 5 Material Multiple mat-menu

javascript

angular

angular5

angular-material-5