如果在 angular 9 模板中禁用其主机按钮，如何启用 mat 工具提示

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

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

假设一个属性是hasDisabledClick

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

然后，您的工具提示始终位于元素的相反 state 中。

查看演示

Answer 2

你需要用另一个 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>