在 Angular 9 中安装引导程序 - TypeScript

在 Angular 9 中，可以使用引导程序快速启动应用程序。该过程涉及引导程序包的安装和一些设置。下面是如何在 Angular 9 中安装引导程序的步骤。

步骤 1：安装引导程序包

要在 Angular 9 中启用引导程序，需要首先安装相关的包。可以使用以下命令安装它们。

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

这将在项目中安装 ng-bootstrap 引导程序库。

步骤 2：导入引导程序模块

在 Angular 9 中，需要在项目中导入以下模块。

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

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

在上面的代码中，首先从 @angular/core导入 NgModule，然后从 @angular/platform-browser 导入 BrowserModule，最后从 @ng-bootstrap/ng-bootstrap 导入 NgbModule。

上述模块需要在 imports 数组中进行导入，以用于完整的项目集成。此外，NgbModule 还用于将应用程序的主组件定义为引导程序。

步骤 3：使用引导程序

引导程序包提供了许多 UI 组件，如警告框、标签页、工具提示等。可以在应用程序中使用这些引导程序组件，以提高用户体验。

例如，要在 Angular 9 中使用模态对话框，可以使用以下代码片段。

<button (click)="open()" class="btn btn-primary">Launch demo modal</button>

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title">Title</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    Content goes here.
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="modal.close('Close click')">Close</button>
  </div>
</ng-template>

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="open()" class="btn btn-primary">Launch demo modal</button>
  `
})
export class AppComponent {
  constructor(private modalService: NgbModal) {}
  
  open() {
    const modalRef = this.modalService.open(this.content);
    modalRef.result.then((result) => {
      // do something on result
    }).catch((error) => {
      // do something on error
    })
  }
 }

上述代码中，首先从 @ng-bootstrap/ng-bootstrap 导入 NgbModal。然后，在 AppComponent 中定义了模态对话框的 HTML 模板 content 和 open() 方法，以打开模态对话框。在模板中，可以定义对话框的标题、内容和按钮。最后，使用 this.modalService 打开模态对话框。

结论

引导程序是一种非常有效的方法，以使用 Angular 9 开发现代 Web 应用程序。它提供了许多 UI 组件，以提高用户体验，并减少了许多开发工作。希望这篇文章能够帮助您了解如何在 Angular 9 中安装和使用引导程序。