Angular 中如何使用 ng-bootstrap？

在 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：

// javascriptcn.com 代码示例
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

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

使用 ng-bootstrap 组件

ng-bootstrap 提供了很多常用的 UI 组件，这里以模态框为例来介绍如何使用。

模态框

在 Angular 中使用 ng-bootstrap 的模态框，需要使用 NgbModalService 和 NgbModalRef 两个类。

打开模态框

首先，在组件中注入 NgbModalService：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private modalService: NgbModal) {}

  openModal(content) {
    this.modalService.open(content);
  }
}

然后在模板中使用 ng-template 定义模态框的内容：

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

<ng-template #myModal>
  <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.close()">确定</button>
    <button type="button" class="btn btn-secondary" (click)="modal.dismiss()">取消</button>
  </div>
</ng-template>

在按钮的 click 事件中调用 openModal 方法，传入 ng-template 的引用，即可打开模态框。

传递参数

如果需要在模态框中传递参数，可以在打开模态框时传入参数：

openModal(content) {
  const modalRef = this.modalService.open(content);
  modalRef.componentInstance.name = 'Angular';
}

在模态框组件中定义一个 name 属性，并在模板中显示：

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

@Component({
  selector: 'app-modal-content',
  template: `
    <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">
      Hello, {{name}}!
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="modal.close()">确定</button>
      <button type="button" class="btn btn-secondary" (click)="modal.dismiss()">取消</button>
    </div>
  `
})
export class ModalContentComponent {
  @Input() name: string;
  constructor(public modal: NgbActiveModal) {}
}

在 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 是标签页的内容。

在组件中定义标签页的标题和内容：

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

@Component({
  selector: 'app-tabset',
  template: `
    <ngb-tabset>
      <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
          Content for tab 1
        </ng-template>
      </ngb-tab>
      <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
          Content for tab 2
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
  `
})
export class TabsetComponent {}

在模板中使用 app-tabset 组件：

<app-tabset></app-tabset>

下拉框

ng-bootstrap 的下拉框组件是 NgbDropdown 和 NgbDropdownMenu。NgbDropdown 是下拉框的容器，NgbDropdownMenu 是下拉框的菜单。

在组件中定义下拉框的选项：

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

@Component({
  selector: 'app-dropdown',
  template: `
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownMenuButton" ngbDropdownToggle>下拉框</button>
      <div ngbDropdownMenu aria-labelledby="dropdownMenuButton">
        <button class="dropdown-item" (click)="selectOption('Option 1')">Option 1</button>
        <button class="dropdown-item" (click)="selectOption('Option 2')">Option 2</button>
        <button class="dropdown-item" (click)="selectOption('Option 3')">Option 3</button>
      </div>
    </div>
  `
})
export class DropdownComponent {
  selectOption(option: string) {
    console.log(option);
  }
}

在模板中使用 app-dropdown 组件：

<app-dropdown></app-dropdown>

总结

本文介绍了如何在 Angular 中使用 ng-bootstrap。ng-bootstrap 提供了很多常用的 UI 组件，如模态框、标签页、下拉框等。通过本文的介绍，读者可以学习到如何安装和使用 ng-bootstrap，并可以根据需求使用 ng-bootstrap 的各种组件，快速构建出漂亮、实用的 UI 界面。

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