介绍
ng2-bootstrap 是一个常用的 Angular UI 组件库，提供了很多常用的 UI 组件，如模态框、下拉菜单、标签页等。它基于 Bootstrap v4 和 Angular 框架开发，需要依赖于 Bootstrap CSS 文件和一些 JavaScript 库。
本文将介绍如何使用 npm 包来安装和使用 ng2-bootstrap，并提供详细的示例代码和指导意义。
安装
首先，在你的项目中安装 ng2-bootstrap：
npm install --save ng2-bootstrap bootstrap@4.6.0 jquery@3.6.0 popper.js@2.9.3
这个命令会安装 ng2-bootstrap 和它所依赖的 Bootstrap、jQuery 和 Popper.js 库。为了确保兼容性，建议安装指定版本的库。
接着，在你的 angular.json 文件中添加以下代码：
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
这个代码片段会将 Bootstrap 的 CSS 和 JavaScript 文件引入到你的项目中。
使用
模态框
ng2-bootstrap 提供了一个名为 NgbModal 的服务，可以用来创建模态框。
首先，在你的组件中导入 NgbModal：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- - ---- -----------------------------
------------
--------- -----------------
--------- -
------- ---------- ------------ -------------------------------
-
--
------ ----- ------------------ -
------------------- ------------- --------- --
------ -
----- -------- - ---------------------------------------
------------------------------- - --------
-
-
------------
--------- -------------------
--------- -
---- ---------------------
--- ------------------------- ----------
------- ------------- ------------- ------------------ ----------------------------------- ---------
----- ---------------------------------
---------
------
---- -------------------
------ ---------
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------------- --------------------
------
-
--
------ ----- -------------- -
-------- ----- -------
------------------ ------------ --------------- --
-这个代码片段定义了一个名为 ModalDemoComponent 的组件，其中包含一个按钮，点击后可以弹出一个模态框。模态框的内容定义在 MyModalContent 组件中。
在 open 方法中，使用 NgbModal 服务创建一个新的模态框，并将 MyModalContent 组件作为其内容。可以通过 modalRef.componentInstance 属性来访问 MyModalContent 组件实例，并传递数据。
下拉菜单
ng2-bootstrap 提供了一个名为 NgbDropdown 的指令，可以用来创建下拉菜单。
<div ngbDropdown>
<button class="btn btn-outline-primary" id="dropdownMenuButton" ngbDropdownToggle>下拉菜单</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item">选项一</button>
<button class="dropdown-item">选项二</button>
<button class="dropdown-item">选项三</button>
</div>
</div>这个代码片段定义了一个包含三个选项的下拉菜单。点击按钮时，菜单项会展开。可以通过在按钮上应用 ngbDropdownToggle 指令来触发下拉菜单的展开和收起。
标签页
ng2-bootstrap 提供
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33618