在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

你需要用另一个divspan包围它，无论什么时候，当某个东西被禁用时，连接到它的任何东西都不会工作。

<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

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

假设一个属性是 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>

然后，你的工具提示总是处于元素的相反状态。

请看演示