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

Question

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

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

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

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

如果您点击配置文件，您会看到 "Edit profile" 工具提示似乎正好出现在刚刚打开菜单的按钮上，即使该工具提示属于第二个按钮（三个按钮中的) 在菜单中。

它始终是 具有 mat-menu-item-指令 的第一个嵌套按钮的工具提示，它显示在调用者按钮上（在本例中 "profile" )，因此放错了地方。

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

您可以在 StackBlitz-link.

中找到软件包及其版本

Answer 1

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

为 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>

Link 更新为 StackBlitz.

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

Weird matTooltip behavior with toolbar-button and nested button

angular-material

angular-material2

angular

angular6