在 Angular 开发中，ui 库扮演着重要的角色，它们可以让开发者更加高效地构建应用，减少样式的开发量。在 ui 库之中，Bootstrap 是颇受欢迎的一种 ui 库，而 ng-bootstrap 和 ngx-bootstrap 又是 Bootstrap 在 Angular 中常用的 ui 库。
本文将对 Angular 中的 ng-bootstrap 和 ngx-bootstrap 进行详细介绍，并且为大家提供使用 ng-bootstrap 和 ngx-bootstrap 的指导意义，以及示例代码供参考。
什么是 ng-bootstrap 和 ngx-bootstrap？
ng-bootstrap 和 ngx-bootstrap 是 Bootstrap 在 Angular 中的 ui 库。ng-bootstrap 是 Bootstrap 4 和 Angular 之间的桥梁，通过它，我们可以轻松地将 Bootstrap 4 的组件集成到 Angular 应用程序中，从而为我们提供了一套基于 Angular 的 UI 组件库。
但 ng-bootstrap 并不是唯一的 Angular Bootstrap 库，还有另一个名为 ngx-bootstrap 的库，基于 Angular 的每个项目的特定需求，它在开发中提供了更多功能。
虽然 ng-bootstrap 和 ngx-bootstrap 都是 Angular 和 Bootstrap 之间的桥梁，但它们各自的设计和使用方式都有所不同。
ng-bootstrap 和 ngx-bootstrap 的使用
安装 ng-bootstrap 和 ngx-bootstrap
要使用 ng-bootstrap 或 ngx-bootstrap，首先需要将它们添加到您的项目中。
安装 ng-bootstrap：
npm install --save @ng-bootstrap/ng-bootstrap
安装 ngx-bootstrap：
npm install --save ngx-bootstrap
安装完成后，在 app.module.ts 文件或您想要使用库的组件中，添加所需库。
添加 ng-bootstrap：
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [NgbModule],
...
})
export class YourAppModule { }添加 ngx-bootstrap：
import { AlertModule } from 'ngx-bootstrap/alert';
@NgModule({
imports: [AlertModule.forRoot()],
...
})
export class YourAppModule { }使用 ng-bootstrap 和 ngx-bootstrap
ng-bootstrap 和 ngx-bootstrap 提供了大量的 UI 组件，包括进度条、警告框、导航菜单等等。我们可以通过引入所需的组件，选择性地将它们添加到我们的项目中。
在组件文件中添加 ng-bootstrap 组件：
-- -------------------- ---- -------
------ - ------------- -------- - ---- -----------------------------
------------
--------- ----------------
--------- -
-------------- --------------------
---------- ------------ ---
-------- ------------
------------
---------- ------------ ---
-------- ------------
------------
---------- ------------ ---
-------- ------------
------------
----------------
--
--
------ ----- ------------------ --在组件文件中添加 ngx-bootstrap 组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ----------------------
------------
--------- -------------
--------- -
------ ------------------- -- -- ------- --------- -------------
--
--
------ ----- --------------- --总结
ng-bootstrap 和 ngx-bootstrap 是将 Bootstrap 组件集成到 Angular 应用程序的完美方式。在本文中，我们了解了如何在 Angular 中使用它们。从中，我们可以明确查看到在使用 ng-bootstrap 和 ngx-bootstrap 时，需首先安装它们，然后选择性地将它们添加到我们的项目中。
作为前端所需要掌握的一部分，ui 库对于我们的开发过程是非常有帮助的。因此，学习和使用 ng-bootstrap 和 ngx-bootstrap，将无疑对我们的开发工作带来了很大的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2426f48841e9894e9779b