角度材料 2 Md-工具提示有条件地显示

Question

我正在尝试使用Angular Material 2的MdToolTip。语法看起来像

<span mdTooltip="Tooltip!">I have a tooltip</span>

但是，我想在我的锚标签上实现此功能。我想在 class="not-active" 运行时将鼠标悬停在 ahchor 标签上时显示工具提示。我怎样才能做到这一点？

<a [ngClass]="{'not-active': !isCurrentUserExist}" [routerLink]="['/create-timesheet']">Link1</a>

/*disabled side menu links*/
.not-active {
pointer-events: none;
cursor: default;
}

Answer 1

我想

在将鼠标悬停在ahchor标签上时显示工具提示，当 class="not-active" 正在操作。

所以，基本上，当变量isCurrentUserExist计算结果为false时，.not-active类是启用的，对吧？(这就是您的代码显示的内容)。

然后，您只需在[matTooltip]中放置一个条件即可实现它@Input：

<span [matTooltip]="!isCurrentUserExist ? 'Tooltip!' : ''">
I have a tooltip
</span>

---

编辑 1

对于更优雅的解决方案，我们可以使用matTooltipDisabled@Input(哪个是在PR#3578年实现并在@angular/components@2.0.0-beta.3 cesium-cephalopod年发布的)：

<span matTooltip="Tooltip!" [matTooltipDisabled]="isCurrentUserExist">
I have a tooltip
</span>

Answer 2

材质角度工具提示有一个名为matTooltipDisabled(布尔类型)的参数。它可以绑定到与要绑定matTooltip相同的元素。

<span matTooltip="Tooltip!" [matTooltipDisabled]="hideTooltip == true">I have a tooltip</span>

不要忘记声明变量并设置一个值;)

let hideTooltip:boolean = false;

因此，使用您自己的代码，更好的解决方案是：

<a matTooltip="Tooltip!" [matTooltipDisabled]="!isCurrentUserExist" [ngClass]="{'not-active': !isCurrentUserExist}" [routerLink]="['/create-timesheet']">Link1</a>
/*disabled side menu links*/
.not-active {
pointer-events: none;
cursor: default;
}

示例：https://stackblitz.com/edit/angular-conditional-tooltip

文档：https://material.angular.io/components/tooltip/overview#disabling-the-tooltip-from-showing