html - 有条件显示的 Angular Material 2 Md-ToolTip

Question

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

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

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

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


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

Answer 1

I want to show the tooltip when I hover over the ahchor tag when the class="not-active" is in action.

因此，基本上，.not-active 类在变量 isCurrentUserExist 计算为false 时启用， 正确的？ (这就是您的代码显示的内容)。

然后，您只需在 [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>