Как предотвратить закрытие меню mat, которое находится внутри родителя, у которого есть свойство - mouseover [hidden]?

Question

У меня есть родительский класс оболочки и кнопка меню дочернего углового материала. Когда я нахожусь за пределами родительского класса, мне нужно скрыть всю оболочку. Но когда я нажимаю на кнопку (которая открывает mat-menu), которая находится внутри родительского класса-оболочки, весь родительский объект закрывается.

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

Я пытался добавить

event.stopImmediatePropagation();
event.preventDefault();
event.stopPropagation();

при нажатии кнопки в дочернем матовом меню, но родительская оболочка закрывается

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

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

Я должен иметь возможность нажимать на меню кнопок и иметь возможность нажимать на элементы в меню

<button mat-button (mouseover)="showBase=true">Hover on me </button>
<div *ngIf="showBase" class="div-style">
   <span  (mouseleave)="showBase=false">
      <button mat-icon-button [matMenuTriggerFor]="menu" 
      #menuTrigger="matMenuTrigger" >
      <mat-icon>menu</mat-icon>
      </button>
      <mat-menu #menu="matMenu" [overlapTrigger]="false">
      <span>
         <button mat-menu-item>
            <mat-icon>home</mat-icon>
            <span>Home</span>
         </button>
         <button mat-menu-item>
            <mat-icon>people_outline</mat-icon>
            <span>Connecting</span>
         </button>
      </span>
      </mat-menu>
   </span>
</div>

Answer 1

Итак, причина, по которой он закрывается, заключается в том, что когда вы нажимаете на кнопку, чтобы открыть меню, Angular добавляет некоторую разметку (одна из которых является наложением на весь экран), которая теперь находится под вашей мышью - так что вы фактически активировалиmouseleave или mouseout.Таким образом, вам придется внести некоторые изменения.Но у вас есть варианты!

• Я не уверен, какую версию вы используете, но есть hasBackdrop, которая может быть установлена ​​на false и может полностью избежать этой проблемы.
• Вы можете запускать / закрывать родительское меню с помощью щелчков мыши, а не движения мыши.Это самое простое решение, но, вероятно, это не тот эффект, которого вы добились.
• Используйте вторую переменную для отслеживания, открыто ли меню или нет, и оставьте родительский элемент открытым, если меню также открыто.Недостатком этого является то, что, когда меню закрывается, ваш родитель тоже.Изменения в вашем Stackblitz будут выглядеть следующим образом:

app.component.ts

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

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

app.component.html

<mat-toolbar color="primary">
    <span class="fill-remaining-space">
    <button mat-button (mouseover)="showBase=true">Hover on me </button>
    <div *ngIf="showBase||menuUp" class="div-style" (mouseleave)="showBase=false">
     <span> 
       <button mat-icon-button 
       [matMenuTriggerFor]="menu" 
       #menuTrigger="matMenuTrigger"
       (menuOpened)="menuUp=true"
       (menuClosed)="menuUp=false">
      <mat-icon>menu</mat-icon>
    </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
    <span >
      <button mat-menu-item>
        <mat-icon>home</mat-icon>
        <span>Home</span>
      </button>
      <button mat-menu-item>
        <mat-icon>people_outline</mat-icon>
        <span>Connecting</span>
      </button>
      <button mat-menu-item>
        <mat-icon>videocam</mat-icon>
        <span>Let's talk</span>
      </button>
      <button mat-menu-item>
        <mat-icon>exit_to_app</mat-icon>
        <span>Logout</span>
      </button>
    </span>
</mat-menu></span>
</div>

 </span> 
  <span class="fill-remaining-space">Application Title</span>
</mat-toolbar>

Вы можете обойти эту проблему, подумав о том, когда устанавливать menuUp=false (а не просто при закрытии меню) и добавив логику, которая имеет смысл для вашей ситуации.

Answer 2

Я изменил вышеуказанный ответ. Я не хочу закрывать базовый контейнер, даже когда закрыто внутреннее меню. Итак, я добавил оверлейный контейнер под ним, и всякий раз, когда он входит в оверлейный контейнер, я закрываю базовый контейнер.

Это обновленная ссылка https://stackblitz.com/edit/angular-yx376k

<mat-toolbar color="primary">
    <span class="fill-remaining-space">
    <button mat-button (mouseover)="showBase=true">Hover on me </button>
    <div class="overlay" style="" (mouseover)="showBase=false;menuUp=false"></div>
    <div *ngIf="showBase||menuUp" class="div-style" (mouseleave)="showBase=false">
     <span> 
       <button mat-icon-button 
       [matMenuTriggerFor]="menu" 
       #menuTrigger="matMenuTrigger"
       (menuOpened)="menuUp=true"
      >
      <mat-icon>menu</mat-icon>
    </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
    <span >
      <button mat-menu-item>
        <mat-icon>home</mat-icon>
        <span>Home</span>
      </button>
      <button mat-menu-item>
        <mat-icon>people_outline</mat-icon>
        <span>Connecting</span>
      </button>
      <button mat-menu-item>
        <mat-icon>videocam</mat-icon>
        <span>Let's talk</span>
      </button>
      <button mat-menu-item>
        <mat-icon>exit_to_app</mat-icon>
        <span>Logout</span>
      </button>
    </span>
</mat-menu></span>
</div>

 </span> 
  <span class="fill-remaining-space">Application Title</span>
</mat-toolbar>