Angular中如何在Service内获取ngx-bootstrap模态框的BsModalRef实例

当然可以实现，以下是两种简单直接的解决思路：

方法一：调用Service方法时直接传入模态框实例 #

直接把组件中通过modalService.show()拿到的BsModalRef实例作为参数传给Service的方法，这样Service就能直接使用同一个实例。

组件代码修改： #

openModal() {
    this.bsModalRef = this.modalService.show(SomeComponent, {
      initialState: {
        title: 'Modal title',
        data: {},
      },
    });
    console.log(this.bsModalRef); // 组件内的模态框实例
    this.service.mimic(this.bsModalRef); // 将实例传入Service方法
  }

Service代码修改： #

mimic(modalRef: BsModalRef) {
    console.log(modalRef); // 这里就是和组件内相同的实例
  }

方法二：在Service中维护全局模态框实例属性 #

在Service里定义一个属性来存储当前的模态框实例，组件打开模态框后把实例赋值给这个属性，之后Service的所有方法都能访问到同一个实例。

Service代码修改： #

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

@Injectable({ providedIn: 'root' })
export class YourService {
  currentModalRef: BsModalRef | null = null;

  mimic() {
    console.log(this.currentModalRef); // 与组件内相同的模态框实例
  }
}

组件代码修改： #

openModal() {
    this.bsModalRef = this.modalService.show(SomeComponent, {
      initialState: {
        title: 'Modal title',
        data: {},
      },
    });
    console.log(this.bsModalRef);
    this.service.currentModalRef = this.bsModalRef; // 将实例赋值给Service的属性
    this.service.mimic();
  }

补充说明 #

你之前在Service中拿到新实例的原因是：BsModalRef是每次调用modalService.show()时生成的专属实例，如果你在Service中直接通过依赖注入获取BsModalRef，它并不会自动关联到你刚打开的那个模态框，所以才会得到新的实例。上面两种方法都是通过手动传递实例的方式，让Service拿到组件中打开的真实模态框引用。

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