ng-bootstrap 是一个基于 Angular 的 UI 组件库，其中包括了许多 Bootstrap 的组件和样式。而 @jiayihu/ng-bootstrap 就是一个对 ng-bootstrap 进行了封装的 npm 包，使用起来更加方便快捷。
本文将详细介绍 @jiayihu/ng-bootstrap 的使用方法，包括安装、导入和组件使用，并提供丰富的示例代码和结果展示，希望能够给前端开发者带来帮助。
安装
@jiayihu/ng-bootstrap 依赖于 ng-bootstrap 和 Bootstrap，因此需要先安装它们：
npm install ng-bootstrap bootstrap
接着安装 @jiayihu/ng-bootstrap：
npm install @jiayihu/ng-bootstrap
导入
在 Angular 应用中使用 @jiayihu/ng-bootstrap 时，需要在 app.module.ts 中导入必要的模块和服务：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - --------- - ---- ------------------------ ------ - ------------ - ---- ------------------ ----------- -------- --------------- ----------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
其中，NgbModule 是导入 @jiayihu/ng-bootstrap 的模块，它提供了所有封装后的组件以及必要的指令和服务。
组件使用
在应用中使用 @jiayihu/ng-bootstrap 的组件时，首先需要在组件中导入必要的模块和服务。例如，在使用 NgbAlert 时，需要先导入 NgbAlertModule 模块：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------------
------------
--------- ---------
--------- -
---------- ----------------------
---- -- - ------ ------
------------
-
--
------ ----- ------------ - -可以看到，使用 NgbAlert 时只需要在组件的模板中加入 ngb-alert 标签，无需自定义 HTML 和 CSS 样式。这是 @jiayihu/ng-bootstrap 的封装优势之一，使用起来非常方便。
以下列举了几个常用的组件和使用方法。
NgbButton
NgbButton 是一个 Bootstrap 按钮组件的封装，支持各种颜色、大小和样式。使用时需要导入 NgbButtonsModule：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ------------------------
------------
--------- ---------
--------- -
-----
------- --------------------------
------- --------- --------------------------------
------- --------- ------------------------------------
------- --------- --------------------------------
------- --------- ------------------------------
------- --------- --------------------------------
------- --------- --------------------------
------- --------- ----------------------------
------- --------- --------------------------
------
-
--
------ ----- ------------ - -结果展示：
除了颜色，NgbButton 还支持多种大小、形状和按钮类型，以及启用禁用特性等，详见 官方文档。使用 NgbButton 可以方便地快速构建出大量互动性强的按钮，提高了开发效率。
NgbModal
NgbModal 是一个 Bootstrap 模态框组件的封装，支持插入任意组件内容。使用时需要导入 NgbModalModule 和 NgbModal 服务：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- -------- - ---- ------------------------
------------
--------- ---------
--------- -
-----
------- --------------------- --------------
------
-
--
------ ----- ------------ -
------------------- ------------- --------- --
------ -
----- -------- - ---------------------------------------
------------------------------- - --------
-
-
------------
--------- -------------------
--------- -
---- ---------------------
--- ---------------------- -----------
------
---- -------------------
------ -- ---- ---
------
---- ---------------------
------- --------------------------------- -----------------------
------
-
--
------ ----- -------------- -
----- -------
------------------ ------------ ------------ --
-对于 NgbModal，需要在组件中定义一个对应的模态框组件，并在 open() 方法中调用 this.modalService.open() 来打开模态框。其中，MyModalContent 组件中可以插入任意内容。
结果展示：
NgbModal 为开发者提供了一个快速创建模态框的方式，使用起来非常便捷，而且可以插入任意组件内容，非常灵活。
总结
本文介绍了 @jiayihu/ng-bootstrap 的安装、导入和组件使用方法，提供了丰富的示例代码和结果展示，旨在帮助前端开发者更快更好地使用 Angular 和 Bootstrap。在实际开发中，可以根据需求使用各种组件和功能，提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609e81e8991b448dedc9