Angular项目中如何向ngb modal模态框传递自定义数据

父组件传参逻辑修改 #

你原代码中result.then的入参是弹窗关闭时的回传值，不是你要传入弹窗的参数，正确传参代码如下：

loadCheckingView(viewData, checkinview) {
  console.log(viewData); // 原始数据打印正常
  // 保存弹窗实例
  const modalRef = this.modalService.open(checkinview, { 
    ariaLabelledBy: 'modal-basic-title', 
    size: 'lg', 
    backdrop: 'static' 
  });
  // 给弹窗组件实例赋值传入的参数，属性名可自定义
  modalRef.componentInstance.receivedViewData = viewData;

  // 监听弹窗关闭后的回传结果
  modalRef.result.then((returnedData) => {
    console.log(returnedData); // 这里拿到的是弹窗内部主动回传的数据
  }, (reason) => {
    // 处理点击背景、ESC关闭等非主动确认关闭的场景
  });
}

弹窗组件接收数据逻辑 #

在你作为弹窗内容的checkinview组件中，需要声明对应输入属性接收数据：

import { Component, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  // 你的组件原有配置
})
export class CheckinViewModalComponent {
  // 属性名要和父组件中componentInstance后挂载的属性名完全一致
  @Input() receivedViewData: any; // 可替换为你实际的TS类型定义

  constructor(public activeModal: NgbActiveModal) {}

  // 若需要关闭弹窗时回传数据给父组件，调用close方法传入参数即可
  confirmClose() {
    const result = {
      // 你要回传的业务数据
    };
    this.activeModal.close(result);
  }
}

原代码异常说明 #

你原代码中第二个console.log(viewData)无法正常输出的原因是：result.then的回调参数是弹窗关闭时通过activeModal.close()主动传入的返回值，和你要传入弹窗的viewData不是同一个变量，若弹窗内部没有主动传参关闭的逻辑，自然无法拿到预期内容。

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