如何更改 matMenuTriggerFor 区域仅在箭头上触发答案

【问题标题】：How to change matMenuTriggerFor area of to be trigger only over the arrow如何更改 matMenuTriggerFor 区域仅在箭头上触发
【发布时间】：2021-02-04 00:39:13
【问题描述】：

那里。我正在尝试更改下一个菜单面板将打开的区域。现在，我正在触发下一个菜单面板，每次我将鼠标悬停在标题或箭头上时，我都想打开这个菜单，只有当我将鼠标悬停在箭头上时。

期望：打开箭头悬停的下一个面板。

实际结果：打开下一个面板，位于按钮上方。

    <ng-container>
      <button mat-menu-item
              [matMenuTriggerFor]="menu.childMenu"
              (menuOpened)="getRelatedAttributes(option)"
              (click)="selectAttribute(option)"
      >
       {{option.title}}
      </button>
    </ng-container>

我尝试将标题移出按钮并使用 flex，这有点效果，但我会失去悬停按钮时所有漂亮的样式。任何想法都将受到高度赞赏

【问题讨论】：

在按钮悬停时你能打开菜单吗？
是的，@ShivanshSeth。我是。但我想在最后 25 个区域打开它，就像箭头所在的位置

标签： javascript html css angular

【解决方案1】：

请查看此示例https://stackblitz.com/edit/mat-nested-menu-yclrmd?embed=1&file=app/nested-menu-example.html

在为按钮悬停提供的示例解决方案中，图标（箭头）上的悬停事件触发调用图标上的事件。

<i class="fa fa-chevron-down" 
            (mouseenter)="buttonEnter(levelOneTrigger)"
             (mouseleave)="buttonLeave(levelOneTrigger, button)">
         </i>

<button mat-menu-item
  [matMenuTriggerFor]="menu.childMenu"
  (menuOpened)="getRelatedAttributes(option)"
  (click)="selectAttribute(option)">
   <span >{{option.title}}
     <i class="fa fa-chevron-down" 
        (mouseenter)="buttonEnter(levelOneTrigger)"
         (mouseleave)="buttonLeave(levelOneTrigger, button)">
     </i>
   </span>
</button>

【讨论】：

是的，但它仍然会在将鼠标悬停在文本上时触发打开菜单。我只想在箭头上找到解决方案。 [matMenuTriggerFor]="menu.childMenu" 就是这样做的