角度材质 – 如何将工具提示添加到禁用按钮

我注意到指令matTooltip不能用于禁用按钮.我怎样才能实现它？

例：

<button mat-raised-button [disabled]="true" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

对于启用的按钮,它可以完美运行：

<button mat-raised-button [disabled]="false" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

解决方法

这不起作用,因为它是由mouseenter事件触发的,大多数浏览器都没有为禁用的元素触发它.解决方法是将matTooltip添加到父元素：

<div matTooltip="You cannot delete that" [matTooltipdisabled]="!isButtondisabled()">
    <button mat-raised-button [disabled]="isButtondisabled()">
        <mat-icon>delete</mat-icon>
    </button>
</div>

上面的示例假定有一种方法可以确定是否应该启用该按钮.通过使用matTooltipdisabled,仅当按钮被禁用时才会显示工具提示.

参考文献：

> https://github.com/angular/material2/issues/5040
> https://github.com/angular/material2/issues/7953