仅在手动关闭弹出窗口的按钮上添加悬停效果

Question

我正在使用 ngb 弹出窗口（https://ng-bootstrap.github.io/#/components/popover/api），它将根据某些条件动态地在按钮上显示弹出窗口。

现在，一旦显示弹出窗口（第一次），我正在使用一些 html，允许用户通过单击“x”符号手动关闭弹出窗口，或者也可以通过外部单击事件关闭弹出窗口（因此，如果用户单击弹出框元素之外的任何位置）。

但是，如果错误仍然存在，我希望将鼠标悬停在按钮上时显示弹出窗口（并且我可以使用 triggers="mouseenter:mouseleave" -> https://ng-bootstrap. github.io/#/components/popover/examples#delay）

问题是，一旦弹出窗口第一次显示，我将鼠标悬停在按钮上 - 它就会关闭，因为它触发了关闭弹出窗口的 mouseleave 事件。

我只希望在手动关闭弹出窗口后对按钮执行悬停效果 - 通过用户执行一些外部单击事件或单击 x 强制关闭弹出窗口。

有人可以告诉我如何做到这一点吗？

谢谢！

Answer 1

要在手动关闭弹出窗口后将鼠标悬停在按钮上时保持弹出窗口打开，您可以结合使用

ngbPopover

指令和

ngbPopoverManual

输入属性。

以下是实现此操作的步骤：

向触发弹出窗口的按钮添加模板引用变量， 例如，

#myPopover="ngbPopover".

向按钮添加

ngbPopoverManual

输入属性，并将其绑定到组件中的布尔变量，例如

ngbPopoverManual="manualClose"

。 在组件中，当手动关闭弹出窗口时，通过单击“x”符号或单击弹出窗口元素外部，将

manualClose

变量设置为 true。

使用

ngbPopover

指令显示弹出窗口内容，并将

manualClose

变量绑定到

ngbPopoverManual

输入属性。 使用

mouseenter

触发器在将鼠标悬停在按钮上时显示弹出窗口，并添加一个条件以在显示弹出窗口之前检查

manualClose

变量是否为 true。

示例： HTML

<!-- Button that triggers the popover -->
<button #myPopover="ngbPopover" ngbPopover="Popover content" ngbPopoverManual="manualClose" triggers="mouseenter:mouseleave" (click)="manualClose = false">Show Popover
   <span class="close" (click)="manualClose = true">&times;</span>
</button>

//组件代码

manualClose = false;

在此示例中，

manualClose

变量最初设置为 false。当弹出窗口手动关闭时，无论是通过单击“x”符号还是单击弹出窗口元素外部，

manualClose

变量都会设置为 true。

ngbPopoverManual

输入属性绑定到

manualClose

变量，因此当

manualClose

变量为true时，将不会显示弹出框。 mouseenter 触发器用于在将鼠标悬停在按钮上时显示弹出窗口。 (click) 事件用于在单击“x”符号时将

manualClose

变量设置为 false。

最后，添加一个条件以在显示弹出窗口之前检查

manualClose

变量是否为 true。这确保了弹出窗口仅在手动关闭时才显示。