介绍
ngx-pop-over 是一个开源的 Angular4 或更高版本的弹出框组件，它能够在鼠标悬停或点击目标元素时快速弹出泡泡或 Popup。
它是基于 Bootstrap 弹出框组件（popover）和 ng-bootstrap的模型编写，并且可以快速轻松地安装和使用。
在本教程中，我们将分享如何使用 ngx-pop-over 包。本教程旨在让初学者通过示例代码了解如何使用本库加强自己网站的用户体验。
安装
使用 ngx-pop-over 需要先安装并配置 Angular CLI。
使用 npm 安装 ngx-pop-over：
npm install --save ngx-pop-over
安装成功后即可引入包并使用。
使用
我们可以在 HTML 中使用 ngx-pop-over 组件来添加弹出框。
首先，导入需要的组件：
import { Component } from '@angular/core';
import { PopoverModule } from "ngx-pop-over";接着，在应用主模块（AppModule）中导入 PopoverModule：
-- -------------------- ---- -------
------ - ------------- - ---- ---------------
-----------
------------- -
------------
--
-------- -
--------------
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在使用之前，需要先定义弹出框的配置。例如：
-- -------------------- ---- -------
--- ------------- - -
------ ---------
-------- ---------
---------- --------
------------- -----
---------- -----
-------------------- -----
---------- ----
--------- ----
--------- ----
---------- ---
--将配置赋值给弹出框组件：
<button popOver [popOverConfig]="popOverConfig">点我弹出菜单</button>
这里引用了上面定义的 popOverConfig，点击按钮时会出现一个弹出框。
示例
这是一个示例代码，你可以复制粘贴直接运行。
app.component.html
-- -------------------- ---- -------
---- ------------------
---- ------------
---- -----------------
------- ------- --------------------------------------------
------
---- -----------------
------- ------- --------------------------------------------
------
---- -----------------
------- ------- --------------------------------------------
------
------
------app.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ---------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
-------------- - -
------ ------
-------- ---------
---------- -------
------------- -----
---------- -----
-------------------- ----
--
-------------- - -
------ ------
-------- ---------
---------- ------
------------- -----
---------- -----
-------------------- ----
--
-------------- - -
------ ------
-------- ---------
---------- --------
------------- -----
---------- -----
-------------------- ----
--
-app.module.ts
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ---------------
-----------
------------- -
------------
--
-------- -
--------------
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -总结
ngx-pop-over 是一个非常强大的库，可以在页面上快速添加弹窗以实现更好的用户体验。弹窗的样式和行为可以定制化，使得适用范围更广。我们希望本文能够对 ngx-pop-over 的学习和使用提供帮助，并希望大家在实际开发中能够借鉴本文的示例代码，让自己的网站更加完美！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664581e8991b448e2586