Angular 2 ng-bootstrap Modal：如何将数据传递到入口组件

typescript

Angular 2 ng-bootstrap Modal：如何将数据传递到入口组件

在Angular 2中，使用ng-bootstrap库可以轻松地创建模态框。模态框是一个常见的UI组件，用于显示一些重要的信息或收集用户的输入。但是，当我们在模态框中进行一些操作并且需要将数据传递回到父组件时，可能会遇到一些困难。在本文中，我将向您展示如何在Angular 2中使用ng-bootstrap模态框将数据传递回入口组件。

在开始之前，确保您已经安装了Angular CLI，并且您的项目中已经添加了ng-bootstrap库。如果您还没有完成这些步骤，请按照以下命令进行安装：

npm install -g @angular/cli
ng new my-app
cd my-app
npm install --save @ng-bootstrap/ng-bootstrap

完成上述步骤后，我们可以开始创建一个简单的示例来展示如何将数据传递回入口组件。

创建一个简单的模态框组件

首先，我们需要创建一个简单的模态框组件，用于显示一些信息并收集用户的输入。在这个例子中，我们将创建一个模态框，用户可以输入他们的姓名，并将其传递回到入口组件。

首先，让我们创建一个名为modal.component.ts的文件，并添加以下代码：

typescript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-modal',
  template: <code>
    <div class="modal-header">
      <h4 class="modal-title">请输入您的姓名</h4>
    </div>
    <div class="modal-body">
      <input type="text" [(ngModel)]="name" class="form-control">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" (click)="save()">保存</button>
      <button type="button" class="btn btn-secondary" (click)="cancel()">取消</button>
    </div>
  </code>
})
export class ModalComponent {
  @Input() name: string;
  @Output() onSave = new EventEmitter<string>();
  @Output() onCancel = new EventEmitter();
  constructor(public activeModal: NgbActiveModal) {}
  save() {
    this.onSave.emit(this.name);
    this.activeModal.close();
  }
  cancel() {
    this.onCancel.emit();
    this.activeModal.dismiss();
  }
}

在上面的代码中，我们创建了一个ModalComponent，它有一个输入属性name用于接收用户的姓名，并且有两个输出属性onSave和onCancel，分别用于保存和取消操作。我们使用NgbModal和NgbActiveModal服务来打开和关闭模态框。

在入口组件中打开模态框

现在，我们已经创建了一个简单的模态框组件，接下来我们需要在入口组件中打开它。在这个例子中，我们将在点击一个按钮时打开模态框，并将用户输入的姓名传递回入口组件。

首先，让我们在入口组件的HTML模板中添加一个按钮，并为它绑定一个点击事件：

html
<button class="btn btn-primary" (click)="openModal()">打开模态框</button>

然后，让我们在入口组件的typescript文件中添加以下代码：

typescript
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from './modal.component';
@Component({
  selector: 'app-root',
  template: <code>
    <h1>Hello, {{ name }}</h1>
  </code>
})
export class AppComponent {
  name = '';
  constructor(private modalService: NgbModal) {}
  openModal() {
    const modalRef = this.modalService.open(ModalComponent);
    modalRef.componentInstance.name = this.name;
    modalRef.componentInstance.onSave.subscribe((name: string) => {
      this.name = name;
    });
    modalRef.componentInstance.onCancel.subscribe(() => {
      // Do something when modal is cancelled
    });
  }
}

在上面的代码中，我们首先注入了NgbModal服务，并在openModal方法中使用open方法打开了模态框。我们还将用户的姓名传递给模态框组件的name属性。

然后，我们使用modalRef.componentInstance.onSave.subscribe方法订阅了模态框组件的onSave事件，并在事件触发时更新入口组件的name属性。

最后，我们使用modalRef.componentInstance.onCancel.subscribe方法订阅了模态框组件的onCancel事件，并在事件触发时执行一些操作（例如，关闭模态框后的附加逻辑）。

运行示例

一切准备就绪后，我们可以运行示例并查看模态框的工作情况。在命令行中运行以下命令来启动开发服务器：

ng serve

然后，打开浏览器并访问http://localhost:4200。在页面上，您将看到一个按钮，点击它将打开模态框。在模态框中，您可以输入您的姓名，并点击保存按钮。您的姓名将会显示在入口组件中。

通过上述示例，我们演示了如何在Angular 2中使用ng-bootstrap模态框将数据传递回入口组件。我们创建了一个简单的模态框组件，用户可以输入姓名并保存。然后，我们在入口组件中打开模态框，并将用户的姓名传递回入口组件。这是一个非常常见的需求，ng-bootstrap库提供了简单而强大的解决方案。希望这篇文章对您有所帮助！