当悬停在菜单项上时停止 Angular Material 菜单显示 URL link

Question

我想使用 <a> 作为菜单项，这样当鼠标指针悬停在浏览器的左下角时，我就可以在浏览器的左下角显示 URL link菜单项（如果此行为依赖于浏览器，则至少 Chrome 会这样做）。

但是，似乎一旦显示菜单，第一个菜单项的 URL link 已经显示在左下角，即使没有鼠标悬停也是如此。

这是一个例子https://stackblitz.com/edit/angular-3pbvns

除非鼠标悬停在菜单项上，否则如何阻止 URL link 显示？

Answer 1

您可以通过在菜单打开时将焦点更改为菜单触发器来解决此问题

component.html

<button mat-button [matMenuTriggerFor]="menu" 
(menuOpened)="menuTrigger.focus()" #menuTrigger="matMenuTrigger">Menu</button>
<mat-menu #menu="matMenu">
  <a mat-menu-item href="link 1">Item 1</a>
  <a mat-menu-item href="link 2">Item 2</a>
</mat-menu>

Working Example

当悬停在菜单项上时停止 Angular Material 菜单显示 URL link

Stop Angular Material Menu from showing URL link when not hovering on a menu item

html

css

angular-material

angular