Angular服务循环依赖报错：无法解析BService的全部参数

问题分析 #

你遇到的Can't resolve all parameters for BService: (?)错误，本质是AService和BService互相在构造函数中注入对方，导致Angular的依赖注入（DI）系统无法完成服务实例初始化——创建AService需要先实例化BService，而创建BService又需要先实例化AService，形成死循环。

解决方法 #

方法1：通过Injector延迟获取服务实例 #

不在构造函数直接注入依赖服务，而是注入Injector，在需要使用时再通过Injector获取实例，避开构造阶段的循环依赖。

修改AService：

import { Injectable, Injector } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class AService {
  private bService: any;

  constructor(private injector: Injector) {}

  // 延迟获取BService实例
  private getBService() {
    if (!this.bService) {
      this.bService = this.injector.get('BService');
    }
    return this.bService;
  }

  getMessageFromB(): string {
    return this.getBService().getMessage();
  }

  getMessage(): string {
    return 'Message from AService';
  }
}

同理修改BService：

import { Injectable, Injector } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class BService {
  private aService: any;

  constructor(private injector: Injector) {}

  private getAService() {
    if (!this.aService) {
      this.aService = this.injector.get('AService');
    }
    return this.aService;
  }

  getMessageFromA(): string {
    return this.getAService().getMessage();
  }

  getMessage(): string {
    return 'Message from BService';
  }
}

方法2：重构代码拆分共享逻辑（推荐） #

循环依赖通常是代码设计的优化信号，建议把两个服务间互相调用的逻辑抽离为独立公共服务，让A、B服务都依赖这个新服务，彻底消除循环依赖。

创建CommonService：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class CommonService {
  getMessageFromA(): string {
    return 'Message from AService';
  }

  getMessageFromB(): string {
    return 'Message from BService';
  }
}

修改AService和BService，移除互相依赖：

// AService
import { Injectable } from '@angular/core';
import { CommonService } from './common.service';

@Injectable({
  providedIn: 'root',
})
export class AService {
  constructor(private commonService: CommonService) {}

  getMessageFromB(): string {
    return this.commonService.getMessageFromB();
  }

  getMessage(): string {
    return this.commonService.getMessageFromA();
  }
}

// BService
import { Injectable } from '@angular/core';
import { CommonService } from './common.service';

@Injectable({
  providedIn: 'root',
})
export class BService {
  constructor(private commonService: CommonService) {}

  getMessageFromA(): string {
    return this.commonService.getMessageFromA();
  }

  getMessage(): string {
    return this.commonService.getMessageFromB();
  }
}

额外优化 #

你的AppComponent中同时使用了providers数组声明服务，且服务本身配置了providedIn: 'root'，这会导致服务被重复注册（根注入器和组件注入器各一个实例）。建议只保留providedIn: 'root'方式，删除AppComponent中的providers配置：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  // 移除providers数组
})
export class AppComponent {
  messageFromB: string = '';
  messageFromA: string = '';

  constructor(
    private readonly aService: AService,
    private readonly bService: BService
  ) {}

  ngOnInit() {
    this.messageFromB = this.aService.getMessageFromB();
    this.messageFromA = this.bService.getMessageFromA();
  }
}

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