Próbuję użyć materiału kątowego 2's mdtooltip. Składnia wygląda jak

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

Chcę jednak wdrożyć tę funkcję na moim znaczniku kotwicy. Chcę pokazać podpowiedzi, gdy najechałem nad tagiem Ahchor, gdy klasa = "nie-aktywna" jest w akcji. Jak mogę to osiągnąć?

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


/*disabled side menu links*/
.not-active {
   pointer-events: none;
   cursor: default;
}
23
ErnieKev 16 luty 2017, 05:22

2 odpowiedzi

Najlepsza odpowiedź

Chcę pokazać podpowiedź, gdy najeżdżam nad tagiem kotwicy, gdy klasa = "nie-aktywna" jest w akcji.

Tak więc, w zasadzie klasa .not-active jest włączona, gdy zmienna isCurrentUserExist ocenia się false , prawda? (To właśnie pokazuje twój kod).

Następnie możesz to osiągnąć, wystarczy umieścić stan w {x0}} @input :

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

Edytuj 1

Aby uzyskać bardziej eleganckie rozwiązanie, możemy użyć matTooltipDisabled @Input (który został zaimplementowany w PR#3578 i wydany w @angular/components@2.0.0-beta.3 cesium-cephalopod ):

<span matTooltip="Tooltip!" [matTooltipDisabled]="isCurrentUserExist">
  I have a tooltip
</span>
43
developer033 19 czerwiec 2019, 03:33

Materiałowa narzędzie kątowe ma parametr o nazwie matTooltipDisabled (typ Boolean). Może być związany z tym samym elementem, co matTooltip jest związany.

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

Nie zapomnij zadeklarować zmiennej i ustawić wartość;)

let hideTooltip:boolean = false;

Tak więc, używając własnego kodu, lepsze rozwiązanie byłoby:

<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;
}

Przykład dla Ciebie: https://stackblitz.com/edit/angular-Conditional-tooltip

Dokumenty: https://material.angular.io/components / ToolTip / Przegląd # Wyłączanie-narzędzie

15
ErickXavier 24 maj 2019, 18:28