ng-bootstrap 是一个基于 Angular 的 Bootstrap 组件库，可以方便地在 Angular 应用中使用 Bootstrap 样式和组件。本文将介绍如何在 Angular 应用中使用 ng-bootstrap，包括安装、导入和使用 ng-bootstrap 组件的方法。
安装 ng-bootstrap
首先，需要安装 ng-bootstrap。可以使用 npm 命令进行安装：
npm install --save @ng-bootstrap/ng-bootstrap
导入 ng-bootstrap
安装完成后，需要在 Angular 应用中导入 ng-bootstrap 模块。在 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------- - ---- -----------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
---------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在上述代码中，我们导入了 NgbModule 模块，并将其添加到 imports 数组中。
使用 ng-bootstrap 组件
使用 ng-bootstrap 组件非常简单。例如，如果要在 Angular 应用中使用 Bootstrap 的模态框，可以按照以下步骤进行操作。
首先，在组件的 HTML 模板中添加以下代码：
-- -------------------- ---- -------
------- ---------- ------------ ---------------------------- --------------
------------ -------- ----------
---- ---------------------
--- ------------------------- ----------
------- ------------- ------------- ------------------ ----------------------------- ---------
----- ---------------------------------
---------
------
---- -------------------
----- ------- ---- -----
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------- -----------------------
------
--------------在上述代码中，我们添加了一个按钮，当用户点击该按钮时，会打开一个模态框。模态框的内容是通过 ng-template 元素定义的。在模态框中，我们添加了一个标题、一个关闭按钮和一个内容区域。
接下来，在组件的 TypeScript 文件中，添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- - ---- -----------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------- --------- --
------------- -
------------------------------- - --------------- ------------------- ----------------------- -- -
------------------- ----- ------------
-- -------- -- -
---------------------- -----------------------------------
---
-
------- ------------------------ ----- ------ -
-- ------- --- ------------------------ -
------ --- -------- -----
- ---- -- ------- --- ----------------------------------- -
------ --- -------- -- - ----------
- ---- -
------ ------ -----------
-
-
-在上述代码中，我们导入了 NgbModal 服务，并在构造函数中注入了该服务。然后，我们添加了一个 open 方法，该方法接受一个 ng-template 元素作为参数，并使用 modalService 的 open 方法打开模态框。在打开模态框时，我们可以指定一些选项，比如 ariaLabelledBy，用于指定模态框的标题。
最后，我们添加了一个 getDismissReason 方法，用于处理模态框关闭的原因。在该方法中，我们根据不同的原因返回不同的字符串。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- ------------------- - ---- -----------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------------- --------- --
------------- -
------------------------------- - --------------- ------------------- ----------------------- -- -
------------------- ----- ------------
-- -------- -- -
---------------------- -----------------------------------
---
-
------- ------------------------ ----- ------ -
-- ------- --- ------------------------ -
------ --- -------- -----
- ---- -- ------- --- ----------------------------------- -
------ --- -------- -- - ----------
- ---- -
------ ------ -----------
-
-
--- -------------------- ---- -------
------- ---------- ------------ ---------------------------- --------------
------------ -------- ----------
---- ---------------------
--- ------------------------- ----------
------- ------------- ------------- ------------------ ----------------------------- ---------
----- ---------------------------------
---------
------
---- -------------------
----- ------- ---- -----
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------- -----------------------
------
--------------总结
在本文中，我们介绍了如何在 Angular 应用中使用 ng-bootstrap。首先，我们需要安装 ng-bootstrap，然后在应用中导入该模块。最后，我们演示了如何使用 ng-bootstrap 组件，以模态框为例。希望这篇文章能够帮助你在 Angular 应用中使用 ng-bootstrap，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d82b8b1886fbafa45d8de2