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

Question

我有一个按钮，我想仅在该按钮被禁用时显示 material 工具提示。这是按钮：

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

我不知道 flag/condition 我应该在 [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>

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

See the demo

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>

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

How to enable mat tooltip if its host button is disabled in angular 9 template

typescript

angular-template

angular