如何阻止Angular Material Menu未hover菜单项时显示URL链接

问题原因 #

这个现象是菜单展开后，第一个<a>元素被默认自动聚焦导致的。浏览器会同时为当前聚焦的可跳转链接元素和hover状态的链接元素在左下角展示对应URL，和hover触发的是同一套展示逻辑。

解决方案 #

可以根据你的使用场景选以下任意一种方案：

• 方案1：关闭菜单的自动聚焦特性
  如果你用的是UI组件库的菜单组件（从示例的Angular项目来看大概率是Angular Material），这类组件默认会在菜单展开时自动聚焦第一个可交互元素，你可以直接配置组件关闭该特性即可，比如Angular Material的mat-menu加上[autoFocus]="false"属性即可，其他主流UI库也都有对应的配置项。
• 方案2：动态绑定href属性，非hover时不设置链接
  默认不给<a>加href属性，仅在鼠标移入对应菜单项时动态绑定，移出后移除，这样就算元素被聚焦，没有href属性也不会展示链接，示例代码如下：

  <a 
    (mouseenter)="currentActiveHref = menuItem.link"
    [href]="currentActiveHref === menuItem.link ? menuItem.link : null"
    (mouseleave)="currentActiveHref = null"
  >
    {{ menuItem.label }}
  </a>
  

• 方案3（不推荐）：给菜单项的<a>加tabindex="-1"
  该属性会让链接无法通过键盘聚焦，也就不会出现自动聚焦展示链接的问题，但会损失无障碍访问能力，无法支持键盘操作菜单，仅可在不需要无障碍适配的场景使用。

内容的提问来源于stack exchange，提问作者user1589188