使用Angular服务调用模态组件时遇依赖解析错误及循环依赖警告

嘿，我看你在拆分模态框组件并实现全局调用服务时碰到了两个棘手的问题：一个是依赖注入失败，另一个是循环依赖警告。让我一步步帮你理清问题根源，然后给出可行的解决方案。

问题根源分析 #

1. 循环依赖陷阱 #

你写的MyModalsService导入了LoginComponent，而LoginComponent又反过来注入了MyModalsService，这就形成了一个闭环引用：

src/app/modals.service.ts -> src/app/login/login.component.ts -> src/app/modals.service.ts

Angular的依赖注入系统没办法处理这种循环引用，所以才会出现Can't resolve all parameters for LoginComponent的错误，错误里的?就是指无法解析的那个循环依赖项。

2. 服务内部注入错误 #

另外，你的MyModalsService里的modalService只是声明了变量，没有通过构造函数注入，这会导致this.modalService是undefined，后续调用show方法肯定会报错。

一步步解决问题 #

第一步：打破循环依赖 #

我们不需要让LoginComponent依赖MyModalsService来关闭模态框，ngx-bootstrap已经提供了BsModalRef，它会自动注入到模态组件中，组件可以直接用它来控制自己的显示/隐藏。

修改LoginComponent的代码：

import { BsModalRef } from 'ngx-bootstrap/modal';
// 删掉对MyModalsService的导入

export class LoginComponent implements OnInit {
  constructor(
    public _userService: UserService, 
    private http: Http, 
    public server: ServerService, 
    public _otherservicesService: OtherservicesService, 
    public global: GlobalService, 
    public datepipe: DatePipe, 
    public modalRef: BsModalRef, // 替换成BsModalRef
    public router: Router
  ) {}

  AfterSuccessLogin() {
    // 直接用modalRef隐藏模态框
    this.modalRef.hide();
  }
}

第二步：修复服务的注入逻辑 #

调整MyModalsService，确保BsModalService通过构造函数正确注入，同时不需要再维护loginModalRef（因为组件自己能处理关闭）：

import { Injectable } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { BsModalService } from 'ngx-bootstrap/modal';
import { LoginComponent } from './login/login.component';

@Injectable({
  providedIn: 'root' // 用这个方式让服务成为全局单例，不用手动在模块里注册
})
export class MyModalsService {
  // 移除loginModalRef的声明
  constructor(private modalService: BsModalService) {} // 构造函数注入BsModalService

  openLogin(): BsModalRef {
    // 返回BsModalRef，外部如果需要额外控制也可以使用
    return this.modalService.show(LoginComponent);
  }
}

第三步：确保服务正确注册（可选） #

如果你没有使用providedIn: 'root'，记得在AppModule的providers数组里注册MyModalsService：

import { MyModalsService } from './modals.service';

@NgModule({
  providers: [MyModalsService]
})
export class AppModule {}

验证修改效果 #

做完这些调整后：

• 循环依赖的警告会消失，因为LoginComponent不再依赖MyModalsService
• 注入错误会被解决，所有依赖项都能被Angular正确解析
• 调用mymodal.openLogin()可以正常打开登录模态框，登录成功后调用this.modalRef.hide()就能顺利关闭模态框

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