Angular Material - скрыть меню при отпускании кнопки

Question

Я получил меню, которое отображается на событии 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 кнопки запуска, добавив

(mouseleave)="matMenu1Trigger.closeMenu()"

. Когда я это делаю и перемещаю мышь над этой кнопкой, меню начинает мерцать, как будто оно открывается / закрывается.каждые несколько миллисекунд.

Почему и как скрыть меню, когда мышь покидает кнопку?

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

Редактировать: Через некоторое времяПоиск в Google Я обнаружил, что такое поведение вызвано наложением, отображаемым при открытии меню, как описано здесь Как открыть мат-меню одним щелчком мыши и закрыть другое открытое меню, если оно есть? .Не уверен, что то, чего я хотел бы достичь, возможно даже из-за наложения ...

Answer 1

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

    }

Answer 2

Пожалуйста, просмотрите этот закрытый вопрос на github

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

Когда ваш mouseenter открывает mat-menu ..., создается cdkOverlay и фокус устанавливается на mat-menu cdkOverlay, это немедленно запускает ваше событие mouseleave, потому что фокус теперь находится на оверлее, а не на вашей кнопке ... даже если ваша мышь все еще находится над кнопкой.

---

Revision

Пожалуйста, ознакомьтесь с приведенным ниже стековым бликом, который я сделал для этого SO ответа.

Как открывать и закрывать меню угловых матов при наведении

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