简介
zoomsphere.ngx-bootstrap 是基于 ngx-bootstrap 库构建的一套前端 UI 组件库。它包含了大量常用的 UI 组件，如弹窗、表单、选项卡等，并且支持响应式设计，可以在不同设备上自适应。通过使用 zoomsphere.ngx-bootstrap，您可以使您的页面更加美观、易用和高效。
安装
在使用 zoomsphere.ngx-bootstrap 前，您需要先安装 Node.js，并且了解 npm 包管理器的使用方法。安装 zoomsphere.ngx-bootstrap 是非常简单的，只需要在命令行中运行以下命令即可：
npm install zoomsphere.ngx-bootstrap
注意，由于 zoomsphere.ngx-bootstrap 是基于 ngx-bootstrap 库构建的，因此您需要先安装 ngx-bootstrap：
npm install ngx-bootstrap
使用
安装完成 zoomsphere.ngx-bootstrap 后，您需要在您的 Angular 项目中引入它。打开您的项目的 app.module.ts 文件，按如下方式进行修改：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------------------- - ---- ---------------------------------------
-- -- ------------- ----
------ -----------------------------------------------
-- -- ------------- ---
------ - ----------- - ---- ----------------------
------ - ----------- - ---- ----------------------
-- -- ------------------------ ---
------ - --------------------- - ---- ---------------------------------
------ - --------------------- - ---- ---------------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
----------------------
----------------------
--------------------------------
-------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在 app.module.ts 文件中，我们需要引入 ngx-bootstrap 样式文件和组件库，以及 zoomsphere.ngx-bootstrap 组件库。请注意，zoomsphere.ngx-bootstrap 组件库中的组件名称与 ngx-bootstrap 中的组件名称是一致的，只是前缀不同。例如，ngx-bootstrap 中的 Alert 组件在 zoomsphere.ngx-bootstrap 中的名称是 ZoomsphereAlert。
之后，您就可以在您的 Angular 组件中使用 zoomsphere.ngx-bootstrap 中的组件了。以下是一个简单的示例：
<button type="button" class="btn btn-primary"
(click)="showAlert()">显示弹窗</button>
<div *ngIf="showingAlert">
<zoomsphere-alert type="success" [dismissOnTimeout]="5000"
[dismiss]="true" (onClosed)="alertClosed()">操作成功</zoomsphere-alert>
</div>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------- ------- - ------
----------- -
----------------- - -----
-
------------- -
----------------- - ------
-
-在上面的示例中，我们使用了 zoomsphere.ngx-bootstrap 中的 Alert
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055dcd81e8991b448db855