npm 包 ng-bootstrap-components 使用教程

随着前端技术的不断发展，越来越多的开源项目和工具涌现出来，对于前端工程师来说选择合适的工具和库变得越来越重要。在 Angular 中，ng-bootstrap-components 是一个非常实用的组件库，它为 Angular 提供了一套基于 Bootstrap 4 的 UI 组件，能够快速搭建符合行业标准的 Web 应用。

本文将重点介绍如何使用 ng-bootstrap-components，包含安装、使用方法、示例代码，希望能够对读者有所帮助。

安装

使用 npm 安装 ng-bootstrap-components：

npm install --save @ng-bootstrap/ng-bootstrap

关于 Bootstrap 4 CSS 的引用，一般有两种方式：

• 在 index.html 中直接引用 Bootstrap 4 的 CSS 代码；
• 安装 Bootstrap 4 npm 包，在 Angular.json 中进行配置引用。

推荐使用第二种方式，首先可以方便的控制 Bootstrap 4 的版本以及提供了一些定制化的配置项。其次，可以避免在 index.html 中引入 CSS 代码，保持代码的规范性。

npm install --save bootstrap

在 Angular.json 中进行配置引用：

{
  ...
  "styles": [
    "src/styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  ...
 }

使用

引入所需的模块：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule, ...],
  ...
})
export class AppModule {
}

引入模块后，就可以使用 ng-bootstrap-components 的组件了，这里以 ngb-alert 和 ngb-carousel 为例进行说明。

NgBootstrapAlert

ngb-alert 是一个非常常用的组件，可以用来展示突出的信息，常常用于提示用户进行某些操作，也可以用于错误信息的提示。

在 HTML 文件中使用 ngb-alert：

<ngb-alert [type]="alertType" [dismissible]="false">
  {{ alertMessage }}
</ngb-alert>

在组件中设置提示信息和提示类型：

export class MyComponent {
  alertMessage: string;
  alertType = 'danger';
 
  constructor() {
    this.alertMessage = '这是一个危险的提示信息';
  }
}

NgBootstrapCarousel

ngb-carousel 是一个很好用的轮播图组件，可以用于显示图片、文本等不同类型内容的轮播效果展示。

在 HTML 文件中使用 ngb-carousel：

-- -------------------- ---- -------
--------------
  ------------ ---------
    ---- -------------------------------------------- ----------- ----- -------
    ---- -------------------------
      ----------------
      --------------
    ------
  --------------
  
  ------------ ---------
    ---- -------------------------------------------- ----------- ------ -------
    ---- -------------------------
      -----------------
      ---------------
    ------
  --------------

  ---
---------------

在组件中设置图像比例、轮播间隔、显示箭头、显示圆点等属性：

export class MyComponent {
  showNavigationArrows = true;
  showNavigationIndicators = true;
  imageAspectRatio: string = '16:9';
  interval: number = 2000;
}

示例代码

更多 ng-bootstrap-components 的相关组件和属性，请参考官方文档。

本文示例代码：https://github.com/littleshadow/ng-bootstrap-components-demo。

结语

ng-bootstrap-components 是 Angular 中一个强大、实用的组件库，具备 Bootstrap 4 的 UI 样式。它可以帮助开发者快速搭建符合行业标准的 Web 应用程序。通过本文对其的介绍，在使用 ng-bootstrap-components 前你需要掌握的知识点和使用步骤已经相对清晰了，这对了解 ng-bootstrap-components 意义非凡。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556b081e8991b448d37ac