关于angular：如何防止关闭具有属性-mouseover [hidden]的父级内部的mat菜单？

How to prevent closing of a mat menu which is inside a parent which has property - mouseover [hidden]?

我有一个父包装类和子角材料菜单按钮。当我将鼠标悬停在父类之外时，我需要隐藏整个包装器。但是，当我单击父包装类中的按钮(打开mat-menu)时，整个父容器关闭。

我应该能够在父包装内执行任何单击操作，并且只有当我将鼠标悬停在父包装外时，它才应该关闭。我该如何实施？

我尝试添加

1
2
3

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

在子垫菜单上单击按钮，但父包装仍然关闭

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

这是我复制问题的stackblitz链接。在单击菜单按钮时，应打开菜单，而不是关闭整个父div。

我应该能够单击按钮菜单，并且应该能够单击菜单中的项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<button mat-button (mouseover)="showBase=true">Hover on me </button>

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

我修改了上面的回复。我不希望基本容器关闭，即使关闭内部菜单也是如此。因此，我在其下添加了一个覆盖容器，只要它进入覆盖容器，我就关闭基本容器。

这是更新的链接
https://stackblitz.com/edit/angular-yx376k

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<mat-toolbar color="primary">
<span class="fill-remaining-space">
<button mat-button (mouseover)="showBase=true">Hover on me </button>

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

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

因此，它关闭的原因是，当您单击按钮以打开菜单时，Angular添加了一些标记(其中一个标记为整个屏幕)，该标记现在位于您的鼠标下方-因此，您已经有效触发了mouseleave或mouseout。因此，您将必须进行一些更改。但是你有选择！

我不确定您使用的是哪个版本，但是有hasBackdrop可以设置为false并可以完全避免此问题。
您可以通过单击而不是鼠标移动来触发父菜单的打开/关闭。这是最简单的解决方法，但显然可能不是您想要的效果。
使用第二个变量跟踪菜单是否打开，如果菜单也打开，则使父窗口保持打开状态。不利的一面是，当菜单关闭时，您的父母也会关闭。对您的Stackblitz的更改如下所示：

app.component.ts

1
2
3
4
5
6
7
8
9
10
11

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<mat-toolbar color="primary">
<span class="fill-remaining-space">
<button mat-button (mouseover)="showBase=true">Hover on me </button>

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

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

您可以通过考虑何时设置menuUp=false(而不是仅在菜单关闭时)并添加适合您情况的逻辑来解决此问题。