Угловое наведение курсора и оставление не работающим MAT-MENU

Question

У меня есть mat-sidenav и список mat-item и mat-menu.Затем при наведении курсора на один из пунктов я хочу отобразить меню.Эта часть работает.Но затем, когда я выхожу из этого меню или пункта и над новым пунктом, я хочу, чтобы его меню отображалось.

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

Я включил блик стека с демонстрацией поведения.

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

Спасибо за помощь

Answer 1

Проблема в том, что при открытии меню создается наложение с фоном, перекрывающим все элементы.Этот фон приводит к тому, что события мыши не будут «видны» слушающим элементом, пока наложение не будет отменено щелчком мыши.К счастью, элемент управления меню имеет флаг для удаления фона;установка этого значения в false устраняет проблему, с которой вы столкнулись.

Примечание: у вас есть *ngFor на элементе <mat-list>, но я думаю, что вы хотите переместить его на элемент <mat-list-item> вместо этого, потому чтоВы хотите много элементов списка, а не много списков.Поскольку вы используете локальную переменную *ngFor вне <mat-list-item>, вы можете создать элемент <ng-container> для размещения *ngFor.См. Ниже stackblitz:

https://stackblitz.com/edit/angular-xsscrm-kx6jyd

Еще одно примечание: это поведение похоже на всплывающую подсказку.Возможно, это было бы лучшим контролем для вашего варианта использования?https://material.angular.io/components/tooltip/overview