如果 mat 按钮在角度 9 模板中被禁用，如何启用垫子工具提示

Question

我有一个按钮，我想仅在按钮禁用时才显示材质工具提示。这是按钮：

<button
mat-icon-button
#tooltip="matTooltip"
matTooltip="Do X to create an account"
[matTooltipDisabled]="...IDK"
[disabled]="false"
(click)="onAddAccountAction()"
>
<mat-icon>Add</mat-icon>
</button>

我不知道我应该在[matTooltipDisabled]中使用什么标志/条件，以便在同一按钮的[disabled]属性为真时不显示工具提示。

编辑

所以我在我的组件文件中添加了一个属性(如下面的答案所示(，它应该禁用或启用工具提示，它确实如此，但是当按钮被禁用时，工具提示总是被禁用。我希望在禁用按钮时特别启用工具提示。

Answer 1

你需要用另一个div/span包围它。 每当禁用某些内容时，连接到它的任何内容都不会起作用。

<span
mat-icon-button
#tooltip="matTooltip"
matTooltip="Do X to create an account"
[matTooltipDisabled]="...IDK"
>
<button
[disabled]="false"
(click)="onAddAccountAction()"
>
<mat-icon>Add</mat-icon>
</button>
</span>

Answer 2

理想情况下，您有一些属性来定义何时禁用按钮，在这种情况下，这应该是您所需要的：

假设属性已禁用单击

<div matTooltip="matTooltip"
[matTooltipDisabled]="!hasDisabledClick" #tooltip="matTooltip"
matTooltip="Do X to create an account">
<button
mat-icon-button 
[disabled]="hasDisabledClick"
(click)="onAddAccountAction()">
<mat-icon>Add</mat-icon>
</button>
</div>

然后，工具提示始终处于元素的相反状态。

观看演示

Answer 3

详细说明@talg123的答案，您可以在按钮内部图标上设置工具提示：

<button mat-icon-button 
#buttonName
(click)="onAddAccountAction()">
<mat-icon matTooltip="your text here"
[matTooltipDisabled]="!buttonName.disabled">Add</mat-icon>
</button>

显然，该图标是一个指向的较窄目标。这也是为什么我更喜欢这种离散的方法。