如何在 angular 13 的 ngbtooltip 中使用 isOpen 方法？

Question

我想在 angular 13 中使用 isOpen() 方法检查工具提示是否打开。

示例：

<li class="mt-menu-icon-wrapper" placement="right" [ngbTooltip]="tooltip" triggers="manual"(mouseenter)="showTooltip('settings')" (mouseleave)="hideTooltip('settings')" 
[closeDelay]="300" (isOpen)="isOpenFlag" ></li> 

<ng-template #tooltip>
Welcome to New Year Party
</ng-template>`

Answer 1

根据 ngbtooltip 文档 https://ng-bootstrap.github.io/#/components/tooltip/api

isOpen 是一种方法而不是 input/output

如果你想在工具提示打开或不打开时设置一个布尔值，你可以玩隐藏和显示的两个输出

hidden : An event emitted when the tooltip closing animation has finished. Contains no payload.

shown : An event emitted when the tooltip opening animation has finished. Contains no payload.

在你的代码中它看起来像

<li class="mt-menu-icon-wrapper" placement="right" [ngbTooltip]="tooltip" triggers="manual"(mouseenter)="showTooltip('settings')" (mouseleave)="hideTooltip('settings')" 
[closeDelay]="300" (shown)="tooltipDisplay(true)" (hidden)="tooltipDisplay(false)"></li>

在控制器中有一个方法

tooltipDisplay(isOpen:boolean) {
   this.isOpenFlag = isOpen;
}

如何在 angular 13 的 ngbtooltip 中使用 isOpen 方法？

How to use isOpen method in ngbtooltip for angular 13?

html

ng-bootstrap

angular

angular13