Angular 中如何使用 NgBootstrap

NgBootstrap 是一个基于 Bootstrap 4 的 Angular UI 组件库，提供了一系列易于使用、高度可定制化的 UI 组件，如模态框、标签页、下拉框等。在 Angular 项目中使用 NgBootstrap 可以大幅度提高开发效率和用户体验。本文将介绍如何在 Angular 中使用 NgBootstrap，帮助读者快速上手。

安装 NgBootstrap

首先，我们需要安装 NgBootstrap。打开终端，进入项目目录，输入以下命令：

npm install @ng-bootstrap/ng-bootstrap

导入 NgBootstrap 模块

安装完成后，我们需要在项目中导入 NgBootstrap 模块。打开 app.module.ts 文件，在 imports 数组中添加 NgbModule：

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgbModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

使用 NgBootstrap 组件

模态框

模态框是一个常用的 UI 组件，可以在页面中弹出一个对话框，提醒用户进行操作。使用 NgBootstrap 实现模态框非常简单。我们先来看一个示例：

// javascriptcn.com 代码示例
<button class="btn btn-primary" (click)="openModal()">打开模态框</button>

<ng-template #modal let-modal>
  <div class="modal-header">
    <h4 class="modal-title">模态框标题</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="modal-body">
    模态框内容
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="modal.dismiss()">关闭</button>
    <button type="button" class="btn btn-primary" (click)="modal.close()">保存</button>
  </div>
</ng-template>

在组件中定义 openModal() 方法：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  template: `
    <button class="btn btn-primary" (click)="openModal()">打开模态框</button>

    <ng-template #modal let-modal>
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        模态框内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="modal.dismiss()">关闭</button>
        <button type="button" class="btn btn-primary" (click)="modal.close()">保存</button>
      </div>
    </ng-template>
  `,
})
export class AppComponent {
  constructor(private modalService: NgbModal) {}

  openModal() {
    const modalRef = this.modalService.open(this.modal);
    modalRef.result.then(
      (result) => {
        console.log(result);
      },
      (reason) => {
        console.log(reason);
      }
    );
  }
}

在 openModal() 方法中，我们通过 this.modalService.open() 方法打开模态框，并传入模板引用 #modal，然后通过 modalRef.result 监听模态框的关闭事件，可以获取到用户的操作结果。

标签页

标签页是另一个常用的 UI 组件，可以在页面中切换不同的内容。使用 NgBootstrap 实现标签页也非常简单。我们先来看一个示例：

// javascriptcn.com 代码示例
<ngb-tabset>
  <ngb-tab title="标签1">
    标签1的内容
  </ngb-tab>
  <ngb-tab title="标签2">
    标签2的内容
  </ngb-tab>
  <ngb-tab title="标签3">
    标签3的内容
  </ngb-tab>
</ngb-tabset>

下拉框

下拉框是一个常用的 UI 组件，可以在页面中提供多个选项供用户选择。使用 NgBootstrap 实现下拉框也非常简单。我们先来看一个示例：

<div ngbDropdown>
  <button class="btn btn-secondary dropdown-toggle" ngbDropdownToggle>下拉框</button>
  <div class="dropdown-menu">
    <button class="dropdown-item" (click)="selectOption('选项1')">选项1</button>
    <button class="dropdown-item" (click)="selectOption('选项2')">选项2</button>
    <button class="dropdown-item" (click)="selectOption('选项3')">选项3</button>
  </div>
</div>

在组件中定义 selectOption() 方法：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div ngbDropdown>
      <button class="btn btn-secondary dropdown-toggle" ngbDropdownToggle>下拉框</button>
      <div class="dropdown-menu">
        <button class="dropdown-item" (click)="selectOption('选项1')">选项1</button>
        <button class="dropdown-item" (click)="selectOption('选项2')">选项2</button>
        <button class="dropdown-item" (click)="selectOption('选项3')">选项3</button>
      </div>
    </div>
  `,
})
export class AppComponent {
  selectOption(option: string) {
    console.log(option);
  }
}

在 selectOption() 方法中，我们可以获取到用户选择的选项。

总结

本文介绍了如何在 Angular 中使用 NgBootstrap，包括安装 NgBootstrap、导入 NgBootstrap 模块、使用 NgBootstrap 组件等。NgBootstrap 提供了丰富的 UI 组件，可以大幅度提高开发效率和用户体验。希望本文对读者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65825635d2f5e1655dd77a78