如何在ngx-bootstrap模态框中传递与接收数据？含确认对话框场景

嘿，我来帮你搞定这个问题！你已经知道用initialState给模态框传数据了，那接收返回数据其实也很简单，主要靠BsModalRef的事件和模态框组件主动返回数据的方式来实现，我给你一步步拆解，再拿确认对话框举个具体例子。

第一步：在模态框组件里处理数据接收和返回 #

首先，你的模态框组件需要先接收父组件传过来的initialState数据，然后定义方法，在用户操作（比如点击确认/取消）时，把需要返回的数据传给父组件，同时关闭模态框。

// modal.component.ts
import { Component, Input } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-confirm-modal',
  templateUrl: './confirm-modal.component.html'
})
export class ConfirmModalComponent {
  // 接收父组件通过initialState传过来的数据
  @Input() message!: string;

  constructor(public bsModalRef: BsModalRef) {}

  // 用户点击确认时，返回确认状态
  confirm(): void {
    // 把需要返回的结果作为参数传入hide方法
    this.bsModalRef.hide(true);
  }

  // 用户点击取消时，返回取消状态
  decline(): void {
    this.bsModalRef.hide(false);
  }
}

对应的模态框模板（confirm-modal.component.html）：

<div class="modal-header">
  <h4 class="modal-title">确认操作</h4>
  <button type="button" class="close" (click)="decline()">×</button>
</div>
<div class="modal-body">
  <p>{{ message }}</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary" (click)="confirm()">确认</button>
  <button type="button" class="btn btn-secondary" (click)="decline()">取消</button>
</div>

第二步：父组件打开模态框并监听返回数据 #

在父组件里，通过BsModalService打开模态框后，利用BsModalRef的onHide事件（模态框开始关闭时触发）或onHidden事件（模态框完全关闭后触发）来接收返回的数据。

// parent.component.ts
import { Component } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ConfirmModalComponent } from './confirm-modal/confirm-modal.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  modalRef?: BsModalRef;

  constructor(private modalService: BsModalService) {}

  openConfirmModal(): void {
    // 通过initialState给模态框传递初始数据
    const initialState = {
      message: '你确定要删除这条记录吗？'
    };

    this.modalRef = this.modalService.show(ConfirmModalComponent, { initialState });

    // 监听onHide事件，获取模态框返回的结果
    this.modalRef.onHide?.subscribe((result: boolean) => {
      if (result) {
        console.log('用户确认了操作，开始执行删除逻辑');
        // 这里写你需要的业务逻辑，比如调用接口删除数据
      } else {
        console.log('用户取消了操作');
        // 处理取消后的逻辑
      }
    });
  }
}

父组件模板里加个触发按钮：

<button type="button" class="btn btn-danger" (click)="openConfirmModal()">删除记录</button>

额外技巧：传递复杂数据 #

如果需要返回更复杂的数据（比如用户填写的表单内容），只需要在模态框的hide方法里传入对象即可：

// 模态框组件里的提交方法
submitForm(): void {
  const formData = {
    username: 'testUser',
    email: 'test@example.com'
  };
  this.bsModalRef.hide(formData);
}

// 父组件里监听返回
this.modalRef.onHide?.subscribe((formData: any) => {
  if (formData) {
    console.log('用户提交的表单数据：', formData);
    // 处理表单数据的逻辑
  }
});

这样就完美实现了双向数据传递——父组件给模态框传初始数据，模态框把用户操作结果或填写的数据返回给父组件。

内容的提问来源于stack exchange，提问作者Marcos Dimitrio