如何在 Angular 中安装引导程序

在 Angular 中，我们可以使用一些第三方引导程序来快速地开发漂亮的 Web 应用。本文将介绍如何安装一个常用的引导程序 - ng-bootstrap。

步骤一：安装 ng-bootstrap

首先，我们需要在 Angular 项目中安装 ng-bootstrap。

打开命令行工具，进入到项目目录并输入以下命令：

npm install @ng-bootstrap/ng-bootstrap

然后等待安装完成。

步骤二：引入 ng-bootstrap 到应用中

导入并注入 NgbModule 到 app.module.ts 文件中，如下所示：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

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

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

在 NgModule 的 imports 数组中添加 NgbModule，这样我们的应用中就可以使用 ng-bootstrap 的组件了。

步骤三：使用 ng-bootstrap

现在，我们已经安装并引入了 ng-bootstrap，下面我们就来演示如何使用 ng-bootstrap 来创建一个简单的模态框。

首先，我们需要在组件中导入 NgbModal，代码如下：

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="open()">Open Modal</button>
  `
})
export class AppComponent {

  constructor(private modalService: NgbModal) { }

  open() {
    this.modalService.open(MyModalContent);
  }

}

@Component({
  selector: 'my-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Modal title</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      Modal content
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class MyModalContent {

  constructor(public activeModal: NgbActiveModal) {}

}

我们在组件中定义了一个名为 open 的方法，在这个方法中调用 modalService 的 open 方法，并将 MyModalContent 作为参数传递进去。

最后我们还需要定义一个 MyModalContent 组件，这个组件用于在模态框中显示我们的内容。

总结

经过上述三个步骤，我们就可以在 Angular 项目中使用 ng-bootstrap 来快速地开发漂亮的 Web 应用了。总体来说，ng-bootstrap 的安装和使用是非常简单的，值得我们去尝试。