web-dev-qa-db-fra.com

Angular 5 Material Multiple mat-menu

Je suis assez nouveau pour Angular 5 et je viens de commencer à l'apprendre.

Récemment, j'ai essayé de créer une barre de menus avec plusieurs menus pour mon application en utilisant Angular 5 Material.
Le menu sera déclenché/ouvert lors de l'entrée de la souris et fermé lorsque la souris quittera le menu.
Mon problème est qu'à chaque fois que la souris passe au premier menu, elle charge les éléments de menu du 2ème menu.

Voici une capture d'écran du problème:
enter image description here

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

J'ai également essayé ceci: @ViewChild('menu1') matMenuTrigger: MatMenuTrigger; mais je reçois des erreurs.
Vos opinions et conseils sont très appréciés!


Merci,
Artanis Zeratul

Références:


javascriptangularangular5angular-material-5
5
Artanis Zeratul

J'ai eu le même problème.

Créez deux composants séparés, chacun contiendra alors son propre menu mat et n'affectera pas l'autre.

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

La bonne solution à ce problème:

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

//And call:

me.trigger.toArray()[indexOfMenu].openMenu();
8
László Leber

J'ai deux menus dans ma barre d'outils, chacun étant un composant distinct et déclenchant un menu différent.

Voir les images ci-dessous:

enter image description here

Voici mon composant de notifications (composant 1 dans l'image ci-dessus) Dans ma vue éditeur:

enter image description here

Dans mon fichier 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>

Je ne pense pas qu'il soit possible d'avoir deux dans un composant mais j'espère que cela aide.

2
non_tech_guy
<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>
0
Madhukar Kumbhar