服务相互依赖

Question

在我的 Angular 2 应用程序中，我有两个相互依赖的服务（服务 A 从服务 B 调用方法，反之亦然）。

以下是相关代码：

app.component.ts:

import {Component} from 'angular2/core';
import {TempService} from '../services/tmp';
import {Temp2Service} from '../services/tmp2';

@Component({
    selector: 'my-app',
    templateUrl: 'app/app/app.component.html',
    providers: [TempService, Temp2Service]
})
export class AppComponent { (...) }

服务 1：

import {Injectable} from 'angular2/core';
import {Temp2Service} from './tmp2';

@Injectable()
export class TempService {
  constructor (private _sessionService: Temp2Service) {}
}

服务 2：

import {Injectable} from 'angular2/core';
import {TempService} from './tmp';

@Injectable()
export class Temp2Service {
  constructor (private _sessionService: TempService) {}
}

运行应用程序会导致以下错误：

例外：无法解析所有参数 'Temp2Service'（未定义）。确保所有参数都是 用 Inject 装饰或具有有效的类型注释，并且 'Temp2Service' 用 Injectable 装饰

在其中一项服务中注释构造函数时，应用程序运行良好。所以我的猜测是这两个服务的“交叉引用”导致了问题。

您知道这里出了什么问题吗？还是我的方法已经错了？

Answer 1

这是一个循环依赖，不幸的是它是一个基本的计算机科学问题或信息问题，Angular 无法解决的问题。尝试做这样的事情：

export class ServiceA {
 constructor(private b: ServiceB){
    b.setA(this);
 }
}

export class ServiceB {
 
 private a: ServiceA

 constructor(){
    
 }

 setA(a){
   this.a = a;
 }

}

这可能是最好的方法。

Answer 2

我在查询我的 API 时遇到了问题。 A 可以有多个 Bs，B 有一个 A 父级。在建立这些模型时，需要忽略其中一种关系以避免循环依赖。然后，当您查询时，您可以简单地将类型转换为any：

this.repositoryService.Query<A>(`$filter=Id eq ${B.AId}`).subscribe(As=>this.importantProp = (As[0] as any).C.property;)

那么在你对 A 的定义中：

@JsonProperty('B', [Object], true) Bs = new Array<Object>();
@JsonProperty('C', [Object], true) C = null;

Answer 3

如果您使用的是 Angular 2，并且需要循环依赖以在某些事件上调用彼此的函数，您可以使用 Observables 并在注入其他服务的 Service 中订阅它们。

例子：

@Injectable()
class Service1 {

  observeEvents() {
    return Obsevable.create((o) => {
      //store `o` it in any class variable
      //whenever you want to call function of Service2 from this class, do this `o.next('method_name');`
    });
  }
}

@Injectable()
class Service2 {
  constructor(private service1: Service1) {
    this.service1.subscribe((method) => {
      this[method]();
    });
  }
}

Answer 4

我遇到了循环依赖问题，找到了很多答案，我发现解决它的最佳方法如下。

据我了解，当您尝试将a: A 传递给b: B 到构造函数 时，就会出现问题。所以避免它的方法是创建你的对象，然后只将a设置为b

至于我 A 和 B 不是那么自言自语，我的例子就是我的案例

请注意，导入不会影响循环依赖问题。

rabbit.component.ts

export class RabbitComponent {

    public rabbitsArray: Rabbit[] = []

    constructor(){
        let lRabbit: Rabbit = new Rabbit(God.rabbitMotherFromEve())
        lRabbit.setRabbitComponent(this)
        rabbits.push(lRabbit)
    }
}

兔子.ts

export class Rabbit {
    public feetsArray: Foot[] // I know its not the best practices but more concise for example
    public rabbitComponent: RabbitComponent

    constructor (anyThingYouWantButRabbitComponent: RabbitMother){
    }
}

Answer 5

这就是所谓的循环依赖。这不是 Angular2 本身的问题。我所知道的任何语言都不允许这样做。

你需要重构你的代码来移除这个循环依赖。您可能需要将其中一项服务拆分为新服务。

如果你遵循单一责任原则，你会发现你不会陷入循环依赖陷阱。

Answer 6

我尝试使用 setTimeout 或使用注入器修复循环依赖警告以及将注入从构造函数移动到另一个函数的所有方法都不适用于 Angular 7。

这是我的工作解决方案：

我创建了另一个服务只是为了将服务引用到第一个服务：

@Injectable()
export class AnotherService {

  private _service: AService;

  get service(): AService {
    return this._service;
  }
  set service(service: AService) {
    this._service = service;
  }
}

然后我可以这样使用它：

@Injectable()
export class AService {

  constructor(private anotherService: AnotherService) {
    anotherService.service = this;
  }
  ...
}

这里：

@Injectable()
export class BService {
  private aService: AService;

  constructor(private injector: Injector) {
    const anotherService = injector.get(AnotherService);
    this.aService = anotherService.service;
  }
  ...
}

Answer 7

这里的关键不是通过构造函数注入服务，而是使用显式的setter & getter。我会在 Angular 4 中使用以下模式：

app.component.ts

import { FooService } from './foo/foo.service';
import { BarService } from './bar/bar.service';

export class AppComponent {

  constructor(public fooService: FooService, public barService: BarService) {

    this.fooService.setBarService(barService);

  }

}

foo.service.ts

@Injectable()
export class FooService {

    barService: any;

    constructor(){
    }

    setBarService(barService: any): void {
        this.barService = barService;
    }

    getBarService(): any {
        return this.barService;
    }

}

Answer 8

我更新了这个解决方案以使用 Angular > 4. 使用 Injector 类，您可以将服务注入到另一个服务中

import { Injector } from '@angular/core';
import { TempService } from './tmp';


@Injectable()
export class Temp2Service {

  private tempService: any;

  constructor (private injector: Injector) { }

  public funcA() {
     this.tempService = this.injector.get(TempService);
     this.tempService.doSomething();
  }
}

Answer 9

我们可以通过forwordRef函数来解决这个问题。

//允许引用尚未定义的引用。

@Inject(forwardRef(() => MyService)) 私有 httpProxy: MyService

Answer 10

构造函数注入可防止循环依赖。

可以通过注入 Injector 并命令式地请求依赖项来分解它：

private payrollService:PayrollService;
constructor(/*private payrollService:PayrollService*/ injector:Injector) {
  setTimeout(() => this.payrollService = injector.get(PayrollService));
}

另见Circular dependency injection angular 2

Answer 11

如果没有单例是可以接受的，您可以尝试在其中一项服务上调用 NEW。喜欢

this._sessionService = new TempService(this);

这是我采用的方法，因为两个服务都没有使用未定义的成员变量。

Answer 12

使用接口 - 这是许多语言中的常见模式。

查看君特斯的回答

Circular dependency with Angular 2 and SystemJS