ng-bootstrap 是一个基于 Angular 框架的 UI 组件库，提供了一些常用的 UI 组件，例如模态框、标签页、下拉菜单等等。本文将详细介绍如何在 Angular 中使用 ng-bootstrap。
安装和导入 ng-bootstrap
使用 ng-bootstrap 首先需要安装和导入相关模块。可以通过 npm 命令来安装 ng-bootstrap：
--- ------- ------ --------------------------
同时需要在应用模块中导入相关模块：
------ - --------- - ---- ----------------------------- ----------- -------- ------------ ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
使用模态框组件
模态框是一个常用的 UI 组件，用于展示详细信息或者弹出交互窗口。在 ng-bootstrap 中，可以使用 NgbModalService 和 NgbModalRef 两个服务来创建和控制模态框。
首先，在组件中引入相关服务：
------ - --------- ----------- - ---- -----------------------------
接着可以在组件中添加方法，用于创建和打开模态框：
------------- - ------------- - -------------------------------- -
这里 content 是一个指向模态框内容的引用，modalRef 是 NgbModalRef 类型的变量，用于在需要时控制模态框的关闭。
在 HTML 模板中，可以添加相关元素用于触发打开模态框的方法：
------- --------------------------------------
------------ -------- ----------
---- ---------------------
--- ------------------------------
------- ------------- ------------- ------------------ --------------------------
----- ---------------------------------
---------
------
---- -------------------
-----
------
---- ---------------------
------- ------------- ---------- -------------- -----------------------------------
------
--------------其中 ng-template 元素用于定义模态框的内容，#content 定义了一个模板引用变量，可以在对应的打开方法中引用。在模板中，可以使用 modal 对象来控制模态框的展示和关闭。
使用标签页组件
标签页是另一个常用的 UI 组件，可以用来组织和显示不同的内容。在 ng-bootstrap 中，可以使用 NgbTabset 组件来创建标签页。首先需要在 HTML 模板中定义标签页的结构：
------------
-------- ---------- ---
--- - ---
----------
-------- ---------- ---
--- - ---
----------
-------- ---------- ---
--- - ---
----------
-------------在组件中也需要引入相关模块：
------ - --------- - ---- -----------------------------
使用下拉菜单组件
下拉菜单是另一个常用的 UI 组件，可以用来展示一个可选菜单列表。在 ng-bootstrap 中，可以使用 NgbDropdown 和 NgbDropdownMenu 组件来定义下拉菜单。
首先需要在 HTML 模板中添加一个触发菜单的元素：
---- ------------
------- ---------- -------------- ----------------------- ------------------
----
---------
---- --------------------- ------------------------------------ ----------------
------- ------------------------- ----------
------- ------------------------- ----------
------- ------------------------- ----------
------
------其中 ngbDropdown 和 ngbDropdownToggle 用于定义一个下拉菜单和触发菜单的按钮，ngbDropdownMenu 用于定义菜单的列表。
在组件中也需要引入相关模块：
------ - ------------ --------------- - ---- -----------------------------
总结
以上就是在 Angular 中使用 ng-bootstrap 的基本方法。ng-bootstrap 提供了许多常用的 UI 组件，可以为开发者在快速开发过程中提供一些便利性。希望这篇文章对读者有所帮助，谢谢阅读！
示例代码
参考 ng-bootstrap 官网提供的示例代码：
------ - --------- - ---- ----------------
------ - --------- ----------- - ---- -----------------------------
------------
--------- -----------
--------- -
------- --------------------------------------
------------ -------- ----------
---- ---------------------
--- ------------------------------
------- ------------- ------------- ------------------ --------------------------
----- ---------------------------------
---------
------
---- -------------------
-----
------
---- ---------------------
------- ------------- ---------- -------------- -----------------------------------
------
--------------
------------
-------- ---------- ---
--- - ---
----------
-------- ---------- ---
--- - ---
----------
-------- ---------- ---
--- - ---
----------
-------------
---- ------------
------- ---------- -------------- ----------------------- ------------------
----
---------
---- --------------------- ------------------------------------ ----------------
------- ------------------------- ----------
------- ------------------------- ----------
------- ------------------------- ----------
------
------
-
--
------ ----- ------------ -
------ --------- ------------
------------------- ------------- --------- --
------------- -
------------- - --------------------------------
-
-来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664bac05d3423812e4a8f37c