使用 ng-bootstrap 在 Angular 中包含 Bootstrap

Bootstrap 是一个流行的前端框架，它可以帮助开发人员快速开发优秀的 Web 应用。随着移动设备的普及，Bootstrap 提供了许多响应式组件和工具来使你的网站在各种设备上都能良好运行。

ng-bootstrap 是一个基于 Angular 框架的 Bootstrap 组件库，提供许多可重用的 UI 组件，包括模态框、警告框、下拉菜单、标签页等。

在本文中，我们将介绍如何使用 ng-bootstrap 在 Angular 项目中包含 Bootstrap。

安装

首先，我们需要安装 ng-bootstrap。在命令行中输入以下命令：

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

这会将 ng-bootstrap 安装到项目中，并将其添加到 package.json 文件的 dependencies 中。

导入模块

接下来，我们需要在 Angular 应用程序中导入所需的 ng-bootstrap 模块。有多个模块可用，例如：

• NgbModule：包含所有提供的 Angular 服务和组件
• NgbAccordionModule：包含折叠面板组件
• NgbAlertModule：包含警告框组件
• NgbCarouselModule：包含图片轮播组件
• NgbCollapseModule：包含折叠组件
• NgbDatepickerModule：包含日期选择器组件
• NgbDropdownModule：包含下拉菜单组件
• NgbModalModule：包含模态框组件
• NgbPaginationModule：包含分页组件
• NgbPopoverModule：包含弹出框组件
• NgbProgressbarModule：包含进度条和进度条组件
• NgbRatingModule：包含评分组件
• NgbTabsetModule：包含标签页组件
• NgbTimepickerModule：包含时间选择器组件
• NgbTooltipModule：包含工具提示组件
• NgbTypeaheadModule：包含自动完成组件

在需要使用 ng-bootstrap 组件的组件中，导入相应的模块。例如，如果要在 AppComponent 中使用 NgbAlert 组件，则应该导入 NgbAlertModule：

import { Component } from '@angular/core';
import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  closeAlert() {
    this.alertVisible = false;
  }
}

使用

导入所需的模块后，我们就可以在组件模板中使用 ng-bootstrap 组件了。

示例：使用 NgbAlert 组件

在我们的示例中，我们将使用 NgbAlert 组件来演示如何使用 ng-bootstrap。该组件允许我们显示一个带有可关闭按钮的警告框。

首先，在需要使用 NgbAlert 组件的组件模板中，导入 NgbAlert 组件：

<!-- app.component.html -->
<ngb-alert *ngIf="alertVisible" (close)="closeAlert()" [dismissible]="true" type="warning">
  Warning: You are using ng-bootstrap!
</ngb-alert>

接下来，在组件类中定义 alertVisible 属性和 closeAlert 方法：

// app.component.ts
export class AppComponent {
  alertVisible = true;

  closeAlert() {
    this.alertVisible = false;
  }
}

现在我们可以在应用程序中看到一个警告框，它带有可关闭按钮。单击“关闭”按钮会触发 closeAlert 方法，隐藏警告框。

总结

使用 ng-bootstrap 可以快速构建具有响应式 UI 组件的 Angular 应用程序。要开始使用，需要执行以下步骤：

1. 安装 ng-bootstrap 模块
2. 导入所需的模块
3. 在组件模板中使用 ng-bootstrap 组件

本文提供了使用 NgbAlert 组件的示例。你可以根据自己的需求使用 ng-bootstrap 中提供的其他组件构建更丰富的应用程序。