Angular 2 ng-bootstrap 关闭模态

typescript

使用Angular 2和ng-bootstrap关闭模态框的简便方法

在Angular 2中，使用ng-bootstrap库可以轻松创建漂亮而灵活的模态框。然而，关闭这些模态框可能会让一些开发者感到困扰。在本文中，我们将介绍如何使用自然语言和简单的示例代码来关闭ng-bootstrap模态框。

创建ng-bootstrap模态框

首先，确保已经安装了ng-bootstrap。可以使用以下命令进行安装：

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

在安装完成后，确保在Angular模块中导入NgBootstrapModule：

typescript
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  imports: [NgbModule],
  // ...
})
export class YourModule { }

现在，我们可以在组件中创建一个简单的ng-bootstrap模态框。以下是一个简单的例子：

typescript
import { Component } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-modal',
  template: <code>
    <ng-template #content let-modal>
      <div class="modal-header">
        <h4 class="modal-title">示例模态框</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        
这是一个简单的ng-bootstrap模态框示例。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="modal.close('Close click')">关闭</button>
      </div>
    </ng-template>
    <button class="btn btn-LG btn-outline-primary" (click)="open(content)">打开模态框</button>
  </code>,
})
export class YourComponent {
  constructor(private modalService: NgbModal) {}
  open(content) {
    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
      (result) => {
        console.log(<code>Closed with: ${result}</code>);
      },
      (reason) => {
        console.log(<code>Dismissed ${this.getDismissReason(reason)}</code>);
      }
    );
  }
  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return <code>with: ${reason}</code>;
    }
  }
}

关闭ng-bootstrap模态框

要关闭ng-bootstrap模态框，可以使用modalService提供的dismiss方法。在组件中，我们可以通过以下方式关闭模态框：

typescript
this.modalService.dismiss('Some reason');

在模态框的HTML模板中，我们通过在关闭按钮上添加(click)="modal.dismiss('Cross click')"来调用dismiss方法，实现了点击关闭按钮时关闭模态框的效果。

在本文中，我们介绍了如何使用Angular 2和ng-bootstrap创建和关闭模态框。通过简单的自然语言解释和示例代码，我们希望您能更轻松地集成和操作ng-bootstrap模态框。使用ng-bootstrap，您可以创建出色的用户体验，并通过简单的方法实现各种交互。希望这篇文章对您在Angular开发中使用ng-bootstrap模态框时有所帮助。