при наведении на mat-menu исчезает значок, отображающий меню

Question

У меня есть компонент angular, который имеет компонент mat-tree.

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

Когда я нажимаю на первом значке отображается mat-menu. Но поскольку кнопки значков действий отображаются ТОЛЬКО при наведении мыши, когда курсор находится в меню, все значки исчезают.

Что можно сделать, чтобы все значки оставались видимыми при наведении курсора на mat-menu?

Демонстрация Stackblitz здесь: Демонстрация

Спасибо за вашу помощь!

Answer 1

Я добавил эту строку в HTML:

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

прямо под тегом span:

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

И затем добавил это в S CSS:

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

Надеюсь, это поможет!