angularjs - 是否可以同时在另一个服务中注入(inject)一个服务，反之亦然？

Question

我在一个真实项目中有一个真实场景，我需要 2 个服务来访问彼此的属性和/或方法。我不是 Angular 专家，所以这可能吗？

我试过了，还是失败了。这是我的尝试:

应用程序组件.ts

import { Component } from '@angular/core';
import { FirstService } from './first.service';
import { SecondService } from './second.service';

@Component({
  selector: 'my-app',
  template: '<h1>Hello world!</h1>',
  providers: [FirstService, SecondService]
})
export class AppComponent {

  constructor(public firstService: FirstService, public secondService: SecondService) {
    console.log(firstService.foo);
    console.log(secondService.bar);
  }

}

首先.service.ts

import { Injectable } from '@angular/core';
import { SecondService } from './second.service';

@Injectable()
export class FirstService {

  foo: string = 'abc';

  constructor(public secondService: SecondService) {
    this.foo = this.foo + this.secondService.bar;
  }

}

second.service.ts

import { Injectable } from '@angular/core';
import { FirstService } from './first.service';

@Injectable()
export class SecondService {

  bar: string = 'xyz';

  constructor(public firstService: FirstService) {
    this.bar = this.bar + this.firstService.foo;
  }

}

笨蛋:http://plnkr.co/edit/PQ7Uw1WHpvzPRf6yyLFd?p=preview

只需将第二个服务注入(inject)到第一个服务中就可以正常工作，但是一旦我将第一个服务注入(inject)到第二个服务中，它就会失败并向控制台抛出错误。

怎么了？

一个可行的解决方案应该将以下内容打印到控制台日志:

abcxyz
xyzabc

提前致谢!

Answer 1

AngularJS 不允许注入(inject)循环依赖。

AngularJS 的作者之一 Miško Hevery 建议寻找共同元素:

+---------+      +---------+
|    A    |<-----|  B      |
|         |      |  |  +-+ |
|         |      |  +->|C| |
|         |------+---->| | |
|         |      |     +-+ |
+---------+      +---------+

并将其提取到第三方服务:

                         +---------+
+---------+              |    B    |
|    A    |<-------------|         |
|         |              |         |
|         |    +---+     |         |
|         |--->| C |<----|         |
|         |    +---+     +---------+
+---------+

有关详细信息，请参阅 Circular Dependency in constructors and Dependency Injection作者:Miško Hevery。