Question

我在Sinnn按钮事件中显示了菜单。工具栏中的所有内容：

mouseenter

发生<mat-toolbar color="primary"> <button mat-button routerLink="/products" [matMenuTriggerFor]="menu1" #matMenu1Trigger="matMenuTrigger" (mouseenter)="matMenu1Trigger.openMenu()">Menu1 </button> <mat-menu #menu1="matMenu"> <div (mouseleave)="matMenu1Trigger.closeMenu()"> <button mat-menu-item>Item 1</button> </div> </mat-menu> </mat-toolbar>事件时，菜单将关闭，到目前为止，效果很好。现在，我也想通过添加

来关闭触发按钮的mouseleave上的菜单

mouseleave

当我这样做并将鼠标移到该按钮上时，菜单开始闪烁，就像每隔几毫秒打开/关闭一次。

为什么？当鼠标离开按钮时如何隐藏菜单？

https://stackblitz.com/edit/angular-kd8bue

编辑：经过一番谷歌搜索后，我发现此行为是由菜单How to open mat-menu on a single click and close other opened menu if there is any?中所述的打开菜单时显示的覆盖图引起的。不知道我是否想要实现，因为有覆盖...

Answer 1

请在github上查看此已关闭的问题

https://github.com/angular/material2/issues/10378#issuecomment-372626596

当您的mouseenter打开mat-menu ...时，会创建一个cdkOverlay并将焦点设置为mat-menu cdkOverlay，这会立即触发您的mouseleave事件，因为现在焦点已在叠加层上，而不是按钮上…即使鼠标仍在按钮上。

修订

请查看下面我对此回答所做的堆叠闪电战。

How to open and close Angular mat menu on hover

https://stackblitz.com/edit/mat-nested-menu-yclrmd?embed=1&file=app/nested-menu-example.html

Answer 2

    <mat-toolbar color="primary">
        <button   mat-button >Menu0 </button>

        <button mat-button routerLink="/products" [matMenuTriggerFor]="menu1"
        #matMenu1Trigger="matMenuTrigger"
        (mouseenter)="buttonenter()"
        (mouseout)="buttonleave()" style=" z-index: 50000">Menu1
        </button>
        <mat-menu #menu1="matMenu" >
          <div (mouseleave)="matMenu1Trigger.closeMenu()"
          (mouseenter)="menuenter()"
          >
        <button mat-menu-item>Item 1</button>
        <button mat-menu-item>Item 2</button>
        <button mat-menu-item>Item 3</button>
        <button mat-menu-item>Item 4</button>
        <button mat-menu-item>Item 5</button>
        <button mat-menu-item>Item 6</button>        
          </div>
        </mat-menu>

          <button   mat-button >MenuX </button>


          <button mat-button routerLink="/products" [matMenuTriggerFor]="menu2"
        #matMenu1Trigger2="matMenuTrigger"
        (mouseenter)="buttonenter2()"
        (mouseout)="buttonleave2()" style=" z-index: 50000">Menu2
        </button>
        <mat-menu #menu2="matMenu" >
          <div (mouseleave)="matMenu1Trigger2.closeMenu()"
           (mouseenter)="menuenter2()"
          >
        <button mat-menu-item>Item2 1</button>
        <button mat-menu-item>Item2 2</button>
        <button mat-menu-item>Item2 3</button>
        <button mat-menu-item>Item2 4</button>
        <button mat-menu-item>Item2 5</button>
        <button mat-menu-item>Item2 6</button>          

          </div>
        </mat-menu>

          <button   mat-button >Menu3 </button>
          <button   mat-button >Menu4 </button>
          <button   mat-button >Menu5 </button>
          <button   mat-button >Menu6 </button>


      </mat-toolbar>


    import { Component, ViewChild } from '@angular/core';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {

      name = 'Angular';
      isEnterMatMenuOpen = false;
      @ViewChild('matMenu1Trigger') _matMenu1Trigger
      @ViewChild('menuButton') _menuButton

      isEnterMatMenuOpen2 = false;
      @ViewChild('matMenu1Trigger2') _matMenu1Trigger2
      @ViewChild('menuButton2') _menuButton2

      buttonenter() {
          this._matMenu1Trigger.openMenu();
          this.isEnterMatMenuOpen = false;
      }
      menuenter() {
          this.isEnterMatMenuOpen = true;
      }
      buttonleave() {
        setTimeout(() => {
        if( !this.isEnterMatMenuOpen ) this._matMenu1Trigger.closeMenu();
        }, 50);
      }

      buttonenter2() {
           this._matMenu1Trigger2.openMenu();  
          this.isEnterMatMenuOpen2 = false; 
      }
      menuenter2() {
          this.isEnterMatMenuOpen2 = true;
      }
      buttonleave2() {
        setTimeout(() => {
        if( !this.isEnterMatMenuOpen2 ) this._matMenu1Trigger2.closeMenu();
        }, 50);
      } 

    }

Angular Material-隐藏按钮的鼠标离开菜单

2 个答案: