如何在ngx-bootstrap-modal中通过ModalService向组件传值并获取

我之前也碰到过一模一样的问题！ngx-bootstrap的ModalService传递数据的核心是利用BsModalRef对象，下面一步步给你讲清楚怎么让模态框组件成功拿到数据：

1. 父组件：正确传递数据到模态框 #

调用ModalService.show()时，第二个参数是配置对象，其中initialState就是用来传递自定义数据的容器。举个实际代码例子：

import { Component } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ModalContentComponent } from './modal-content.component';

@Component({
  selector: 'app-parent',
  template: `<button (click)="openModal()">打开模态框</button>`
})
export class ParentComponent {
  modalRef?: BsModalRef;

  constructor(private modalService: BsModalService) {}

  openModal() {
    // 准备要传递的数据
    const initialState = {
      modalTitle: '自定义标题',
      userInfo: { name: '张三', age: 28 }
    };

    // 打开模态框并传入数据
    this.modalRef = this.modalService.show(ModalContentComponent, { initialState });
  }
}

2. 模态框组件：接收并使用数据 #

这里有两种常用的方式，选哪种都可以：

方式一：直接声明同名属性（最简便） #

ngx-bootstrap会自动把initialState里的键值对赋值给模态框组件的同名属性，直接用就行：

import { Component } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-modal-content',
  template: `
    <div class="modal-header">
      <h4>{{ modalTitle }}</h4>
      <button class="close" (click)="modalRef.hide()">&times;</button>
    </div>
    <div class="modal-body">
      <p>用户名：{{ userInfo.name }}</p>
      <p>年龄：{{ userInfo.age }}</p>
    </div>
  `
})
export class ModalContentComponent {
  // 和initialState里的键名完全对应
  modalTitle!: string;
  userInfo!: { name: string; age: number };

  constructor(public modalRef: BsModalRef) {}
}

方式二：通过BsModalRef获取完整的initialState #

如果不想依赖属性名的一致性，或者需要动态处理数据，可以直接从BsModalRef的配置里拿到整个初始状态对象：

import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-modal-content',
  template: `
    <div class="modal-header">
      <h4>{{ data.modalTitle }}</h4>
      <button class="close" (click)="modalRef.hide()">&times;</button>
    </div>
    <div class="modal-body">
      <p>用户名：{{ data.userInfo.name }}</p>
    </div>
  `
})
export class ModalContentComponent implements OnInit {
  data!: any;

  constructor(public modalRef: BsModalRef) {}

  ngOnInit() {
    // 从config里取出传递的初始数据
    this.data = this.modalRef.config.initialState;
    console.log('拿到的数据：', this.data);
  }
}

常见踩坑点 #

• 确保initialState里的键名和模态框组件的属性名完全一致（方式一）；
• 不要忘记在模态框组件里注入BsModalRef；
• 如果传递的是异步获取的数据，要等数据加载完成后再调用modalService.show()，不然会传空值；
• 检查是否正确导入了BsModalModule并在模块中声明了模态框组件。

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