在 Angular 中，如果想要使用 Bootstrap 的 UI 组件，可以使用 ng-bootstrap 这个库。ng-bootstrap 是基于 Bootstrap 4 的 Angular 组件库，它提供了很多常用的 UI 组件，如模态框、标签页、下拉框等。本文将介绍如何在 Angular 中使用 ng-bootstrap。
安装 ng-bootstrap
使用 ng-bootstrap 需要先安装它。可以通过 npm 安装 ng-bootstrap：
npm install --save @ng-bootstrap/ng-bootstrap
导入模块
安装完 ng-bootstrap 后，需要在模块中导入它。在 app.module.ts 中导入 NgbModule：
-- -------------------- ---- -------
------ - --------- - ---- -----------------------------
-----------
------------- -
------------
--
-------- -
--------------
---------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用 ng-bootstrap 组件
ng-bootstrap 提供了很多常用的 UI 组件，这里以模态框为例来介绍如何使用。
模态框
在 Angular 中使用 ng-bootstrap 的模态框，需要使用 NgbModalService 和 NgbModalRef 两个类。
打开模态框
首先，在组件中注入 NgbModalService：
-- -------------------- ---- -------
------ - -------- - ---- -----------------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------------------- ------------- --------- --
------------------ -
--------------------------------
-
-然后在模板中使用 ng-template 定义模态框的内容：
-- -------------------- ---- -------
------- ---------- ------------ -------------------------------------------
------------ ---------
---- ---------------------
--- ------------------------------
------- ------------- ------------- ------------------ --------------------------
----- ---------------------------------
---------
------
---- -------------------
-----
------
---- ---------------------
------- ------------- ---------- -------------- -----------------------------------
------- ------------- ---------- -------------- -------------------------------------
------
--------------在按钮的 click 事件中调用 openModal 方法，传入 ng-template 的引用，即可打开模态框。
传递参数
如果需要在模态框中传递参数，可以在打开模态框时传入参数：
openModal(content) {
const modalRef = this.modalService.open(content);
modalRef.componentInstance.name = 'Angular';
}在模态框组件中定义一个 name 属性，并在模板中显示：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- --------------------
--------- -
---- ---------------------
--- ------------------------------
------- ------------- ------------- ------------------ --------------------------
----- ---------------------------------
---------
------
---- -------------------
------ ---------
------
---- ---------------------
------- ------------- ---------- -------------- -----------------------------------
------- ------------- ---------- -------------- -------------------------------------
------
-
--
------ ----- --------------------- -
-------- ----- -------
------------------ ------ --------------- --
-在 ng-template 中使用 app-modal-content 组件，并传入 name 属性：
<button class="btn btn-primary" (click)="openModal(myModal)">打开模态框</button> <ng-template #myModal> <app-modal-content [name]="'Angular'"></app-modal-content> </ng-template>
标签页
ng-bootstrap 的标签页组件是 NgbTabset 和 NgbTabContent。NgbTabset 是标签页的容器，NgbTabContent 是标签页的内容。
在组件中定义标签页的标题和内容：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------
--------- -
------------
-------- ---------- ---
------------ --------------
------- --- --- -
--------------
----------
-------- ---------- ---
------------ --------------
------- --- --- -
--------------
----------
-------------
-
--
------ ----- --------------- --在模板中使用 app-tabset 组件：
<app-tabset></app-tabset>
下拉框
ng-bootstrap 的下拉框组件是 NgbDropdown 和 NgbDropdownMenu。NgbDropdown 是下拉框的容器，NgbDropdownMenu 是下拉框的菜单。
在组件中定义下拉框的选项：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------------
--------- -
---- ----------- -----------------------
------- ---------- -------------------- ----------------------- ------------------------------
---- --------------- -------------------------------------
------- --------------------- ----------------------------- ----------- ----------
------- --------------------- ----------------------------- ----------- ----------
------- --------------------- ----------------------------- ----------- ----------
------
------
-
--
------ ----- ----------------- -
-------------------- ------- -
--------------------
-
-在模板中使用 app-dropdown 组件：
<app-dropdown></app-dropdown>
总结
本文介绍了如何在 Angular 中使用 ng-bootstrap。ng-bootstrap 提供了很多常用的 UI 组件，如模态框、标签页、下拉框等。通过本文的介绍，读者可以学习到如何安装和使用 ng-bootstrap，并可以根据需求使用 ng-bootstrap 的各种组件，快速构建出漂亮、实用的 UI 界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655496f1d2f5e1655de62731