web-dev-qa-db-ja.com

Angular Material 2 Md-ToolTip with show with conditionally

Angular Material 2's 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;
}
htmlcssangularangular-material2
14
ErnieKev

Class = "not-active"が動作しているときにahchorタグにカーソルを合わせるとツールチップが表示されます。

したがって、基本的には、 variable isCurrentUserExistがfalseと評価されると、.not-activeクラスが有効になります。 （それはあなたのコードが示しているものです）。

次に、[matTooltip]@ Inputに条件を置くだけで達成できます。

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

編集1

より洗練されたソリューションとして、matTooltipDisabled@Inputを使用できます（これは PR#3578 で実装され、-でリリースされました @angular/[email protected] cesium-cephalopod ）：

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

Material Angular Tooltipには、そのために作成された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

13
ErickXavier