如果在角度 9 模板中禁用了主机按钮，如何启用 mat 工具提示答案

【问题标题】：How to enable mat tooltip if its host button is disabled in angular 9 template如果在角度 9 模板中禁用了主机按钮，如何启用 mat 工具提示
【发布时间】：2020-06-18 02:52:56
【问题描述】：

我有一个按钮，我希望仅在该按钮被禁用时显示材质工具提示。这是按钮：

<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] 属性为真时不显示工具提示。

编辑

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

【问题讨论】：

标签： angular typescript angular-template

【解决方案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>

【讨论】：

mat-icon-button 应该在按钮中，但它可以工作。谢谢

【解决方案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>

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

See the demo

【讨论】：

这个hasDisabledClick 属性是在组件的.ts 文件中定义的吗？
@Flameofudun 是的。
所以我在我的组件文件中添加了一个属性，它应该禁用或启用工具提示，它确实如此，但是当按钮被禁用时，工具提示总是被禁用。我希望在禁用按钮时专门启用工具提示。