使用ngbmodal和Angular 9进行安装

在本文中，我们将介绍如何在 Angular 9 项目中使用 ngbmodal，这是一个基于Bootstrap的弹出窗口组件。我们将演示如何使用 yarn 进行安装，并使用 TypeScript 编写代码。

安装ngbmodal

在使用 ngbmodal 之前，我们需要先安装它。我们可以使用 yarn 进行安装：

yarn add @ng-bootstrap/ng-bootstrap

导入ngbmodal

安装完毕后，我们需要将 ngbmodal 导入到我们的模块中。打开您想要使用ngbmodal的Angular模块，并将导入 NgBootstrapModule。

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
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用ngbmodal

现在我们已经成功地将ngbmodal导入到了我们的模块中，让我们来看一下如何在组件中使用它。使用ngbmodal非常简单，我们只需要在模板中调用 NgbModal 的 open() 方法。

在组件的构造函数中注入 NgbModal。

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="open(content)">Open modal</button>

    <ng-template #content let-modal>
      <div class="modal-header">
        <h4 class="modal-title">Modal 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">
        Modal content
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="modal.close('Close click')">Close</button>
      </div>
    </ng-template>
  `
})
export class AppComponent {
  constructor(private modalService: NgbModal) {}

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

上面这段代码中，我们在组件的模板中定义了一个 ng-template，然后在点击按钮时调用了 NgbModal 的 open() 方法来打开该模板。这个方法接受一个参数，这个参数就是我们刚才定义的模板。在我们的模板中，我们使用了 Bootstrap 的样式来定义了一个弹出窗口。

总结

在本文中，我们演示了如何在 Angular 9 项目中使用 ngbmodal。我们首先通过 yarn 安装了 ngbmodal，然后将其导入到模块中，在组件中使用 NgbModal 的 open() 方法来调用弹出窗口。我相信，通过本文的学习，你已经对如何使用 ngbmodal 有了一定的了解。