ngx-bootstrap模态框获取非单例服务实例问题求助

嘿，我刚碰到过一模一样的坑！这是因为ngx-bootstrap的动态模态框组件默认的注入器上下文导致MyService没有复用单例实例，下面是几个靠谱的解决步骤：

1. 确保服务本身是根注入的 #

首先检查你的MyService的装饰器，一定要设置providedIn: 'root'，这样Angular会在整个应用级别维护一个单例：

@Injectable({
  providedIn: 'root' // 关键：根注入，全局单例
})
export class MyService {
  // 你的服务逻辑，比如sort()方法
}

2. 避免重复声明服务 #

如果你的服务是在模块的providers数组里声明的，只在根模块（AppModule）的providers里添加一次，绝对不要在其他功能模块或者组件的providers里重复注册，否则会创建新的实例。

3. 打开模态框时使用根注入器 #

用BsModalService打开模态框的时候，加上useRootInjector: true选项，强制模态框使用根注入器，这样就能拿到全局单例的MyService了：

// 在负责打开模态框的组件里
openModal() {
  this.bsModalRef = this.bsModalService.show(ModalContentComponent, {
    useRootInjector: true // 让模态框使用根注入器
  });
}

4. 检查模态框组件的providers #

最后确认你的ModalContentComponent的@Component装饰器里，没有把MyService加到providers数组里，否则会覆盖根注入的实例，创建一个局部的服务实例：

@Component({
  selector: 'app-modal-content',
  templateUrl: './modal-content.component.html',
  // 这里绝对不能有providers: [MyService]！
})
export class ModalContentComponent implements OnInit {
  // ... 你的组件代码
}

原理其实很简单：ngx-bootstrap的动态模态框默认会使用父组件的注入器，如果父组件所在的模块或者组件自己声明了服务，就会生成新实例；而通过以上步骤，我们确保服务是全局单例，并且模态框使用根注入器来获取服务，就能解决这个问题啦！

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