代码之家 › 专栏 › 技术社区 › Artanis Zeratul

角度5材质多材质菜单

angular-material-5 angular5 angular javascript

Artanis Zeratul · 技术社区 · 7 年前

我对Angular5很陌生,刚刚开始学习它。

最近,我尝试使用Angular5材质为我的应用程序创建一个包含多个菜单的菜单栏。
当鼠标进入菜单时,菜单将被触发/打开,当鼠标离开菜单时,菜单将被关闭。
我的问题是每当鼠标停留在第一个菜单上时,它就会加载第二个菜单的菜单项。

以下是问题的截图:

以下是我的代码:
主菜单.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; 但我犯了错误。
非常感谢您的意见和建议!

谢谢,
泽拉图尔美术馆

参考文献:

4 回复 | 直到 7 年前

nontechguy 7 年前

我也有同样的问题。

创建两个独立的组件,每个组件将包含自己的mat菜单,不会影响其他组件。

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

brooksrelyt Ozal Zarbaliyev 7 年前

此问题的正确解决方案:

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

//And call:

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

Quentin 7 年前

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

见下图:

这是我的通知组件(上图中的组件1) 在“我的编辑器”视图中:

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

我不认为有可能有两个在一个组成部分,但我希望这有帮助。

Madhukar Kumbhar 7 年前

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