代码之家 › 专栏 › 技术社区 › Igor

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

angular6 angular-material2 angular-material angular

Igor · 技术社区 · 7 年前

我正经历着一种奇怪的行为——尽管它可能是按预期工作的(这就是为什么我不马上提交一个bug)或者我正在使用的原因。 mat-menu-item -在一个我不该去的地方指使?

当我有一个按钮,它打开一个菜单,依次包含一个带有 Mat菜单项 -指令,它的工具提示似乎放错了地方。

使用 mat-button -相反,指令似乎解决了问题,但按钮行为不同。

斯塔克布利茨: https://stackblitz.com/edit/angular-inhkax

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

它总是 第一个嵌套按钮 Mat菜单项 -指令 ,它显示在调用方按钮(在本例中为“profile”)上,因此位于错误的位置。

它使此工具提示悬挂 “在将此特定嵌套按钮悬停在上方之前,将使错位的工具提示消失,并导致相同的工具提示出现在正确的指定(或默认)位置。

您可以在stackblitz链接中找到包及其版本。

1 回复 | 直到 7 年前

FAISAL 7 年前

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

为添加引用 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 .

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

Jihed Ben Zarb · 造型角材料日期选择器

6 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

6 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

6 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

6 月前

Jace Johnson · Typescript文件读取的变量类型错误

6 月前

Ole · Angular资源API是否支持为资源添加初始值?

6 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

6 月前