Búsqueda de sitios web

angularjs - ¿Es posible inyectar un servicio dentro de otro servicio y viceversa al mismo tiempo?

Tengo un escenario real en un proyecto real donde necesito que 2 servicios accedan a las propiedades y/o métodos del otro. No soy un experto en Angular, ¿es posible?

He intentado y falla. Aquí está mi intento:

app.component.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);
  }

}

primero.servicio.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;
  }

}

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

Simplemente inyectar el segundo servicio en el primer servicio funciona bien, pero en cuanto inyecto el primer servicio en el segundo servicio falla y lanza errores en la consola.

¿Entonces, qué está mal?

Una solución funcional debería imprimir lo siguiente en el registro de la consola:

abcxyz
xyzabc

¡Gracias de antemano!

Respuesta #1

AngularJS no permite la inyección de dependencias circulares.

Miško Hevery, uno de los autores de AngularJS, recomienda encontrar elementos comunes:

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

Y extraerlo a un tercer servicio:

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

Para obtener más información, consulte Dependencia circular en constructores e Inyección de dependencia de Miško Hevery.

Respuesta #2

No soy un experto en Angular, así que ¿es posible?

No. Las dependencias circulares no son resueltas por la inyección de dependencias de Angular.

Además, incluso los sistemas que lo soportan, con bastante frecuencia son inconsistentes, por ejemplo, commonjs https://nodejs.org/docs/latest/api/modules.html#modules_cycles te dará un objeto vacío durante un tiempo.

Solución

Considera combinar los dos servicios en uno. Aún puedes mover ciertas cosas (por ejemplo, funciones simples, etc.) fuera del servicio combinado si se vuelve demasiado.

Artículos relacionados