带有工具栏按钮和嵌套按钮的奇怪 matTooltip 行为

Question

我遇到了一种奇怪的行为 - 尽管它可能按预期工作（这就是我没有立即提交错误的原因）或者我在不应该使用 mat-menu-item-directive 的地方？

当我有一个打开一个菜单的按钮时，该菜单又包含一个带有 mat-menu-item 指令的按钮，它的工具提示似乎奇怪地放错了位置。

使用mat-button-directive 似乎可以解决问题，但按钮行为不一样。

StackBlitz： https://stackblitz.com/edit/angular-inhkax

如果您单击配置文件，您会看到“编辑配置文件”工具提示似乎出现在刚刚打开菜单的按钮上，即使该工具提示属于第二个按钮（三个按钮中的三个）菜单。

它始终是第一个嵌套按钮具有mat-menu-item-directive 的工具提示，它显示在调用者按钮（在本例中为“配置文件”）上，因此出现在错误的位置。

它会导致此工具提示“挂起”，直到将鼠标悬停在此特定嵌套按钮上，使放错位置的工具提示消失，并导致相同的工具提示出现在正确的指定（或默认）位置。

您可以在 StackBlitz-link 中找到这些包及其版本。

Answer 1

似乎是材质菜单重叠的问题。我的猜测是，当菜单打开时，鼠标在第一个项目上，因此工具提示显示错误。您可以通过执行以下操作来避免这种情况：

为 mat-menu-trigger 添加参考，例如

<button mat-button 
        #profileMenuTrigger="matMenuTrigger" 
        [matMenuTriggerFor]="profile">
    <mat-icon>face</mat-icon>&nbsp;Profile
</button>

之后，根据第一个菜单项的触发状态设置matTooltipDisabled输入，如下所示：

<button mat-menu-item 
        matTooltip="Show file upload" 
        [matTooltipDisabled]="!profileMenuTrigger.menuOpen">
    <mat-icon>file_upload</mat-icon>File upload
</button>

链接到更新的StackBlitz。