将鼠标悬停在菜单上时，显示菜单的图标消失

Question

我有一个角分量，其中有一个mat-tree分量。

每个树节点都有操作图标按钮，这些图标在节点行上悬停显示。

当我单击第一个图标时，它会显示一个mat-menu。但是，由于仅在鼠标悬停时显示了操作图标按钮，所以当悬停在菜单上时，所有图标都会消失。

如何在悬停在mat-menu上时使所有图标仍然可见？

此处的Stackblitz演示：demo

感谢您的帮助！

Answer 1

我将此行添加到HTML：

<div [ngClass]="{'show-icons-and-menu': showIconsAndMenu && node === activeNode}">

在此span标签下：

<span class="hover-actions-menu">

然后将其添加到SCSS：

.show-icons-and-menu {
  visibility: visible !important;
}

编辑：

添加变量以存储活动的单击节点

*。ts

public activeNode = null;

添加点击功能可保存活动的点击节点

*。html

<button mat-icon-button color="accent" [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu" (click)="activeNode = node">

希望有帮助！