E 'possibile iniettare un servizio all'interno di un altro servizio e viceversa allo stesso tempo?

Question

Ho uno scenario reale in un progetto reale in cui ho bisogno di 2 servizi per accedere alle proprietà e/o ai metodi l'uno dell'altro. Non sono un esperto angolare, quindi è possibile?

Ho provato e fallisce. Ecco il mio tentativo:

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); 
    } 

} 

first.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; 
    } 

} 

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

Giusto iniettare il secondo servizio nel primo servizio funziona bene ma non appena iniettare il primo servizio nel secondo servizio fallisce e genera errori nella console.

Quindi cosa c'è che non va?

una soluzione di lavoro dovrebbe stampare il seguente al log della console:

abcxyz 
xyzabc 

Grazie in anticipo!

Answer 1

AngularJS non consente iniezione di dipendenze circolari.

Miško Hevery, uno degli AngularJS autori, raccomanda di trovare gli elementi comuni:

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

e l'estrazione a un terzo servizio:

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

Per ulteriori informazioni, vedere Circular Dependency in constructors and Dependency Injection da Miško Hevery.

Answer 2

io non sono un esperto in modo angolare è possibile

No. dipendenze circolari non si risolvono con DI di angolare.

Anche i sistemi che lo supportano, abbastanza comunemente sono incoerenti per es. commonjs https://nodejs.org/docs/latest/api/modules.html#modules_cycles ti darà un oggetto vuoto per un po '.

Soluzione

Consideriamo che unisce i due servizi in uno. Puoi comunque spostare determinate cose (ad es. Semplici funzioni, ecc.) Dal servizio combinato se diventa troppo.

Answer 3

Sono d'accordo con la soluzione proposta da basarat. Un'altra soluzione potrebbe essere quella di inizializzare le istanze di fuori DI e fornire loro come valore come

Un servizio deve essere modificato per essere in grado di creare un'istanza senza fornire l'altro servizio come dipendenza:

@Injectable() 
export class FirstService { 

    foo: string = 'abc'; 
    secondService: SecondService 

    constructor() { 
    //this.foo = this.foo + this.secondService.bar; 
    } 

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

Quindi creare le istanze imperativamente e fornire loro come valore

let firstService = new FirstService(); 
let secondService = new SecondService(firstService); 

@Component({ 
    selector: 'my-app', 
    template: '<h1>Hello world!</h1>', 
    providers: [ 
    provide(FirstService, {useFactory:() => { 
     firstService.init(secondService); 
     return firstService; 
    }}), provide(SecondService, {useValue: secondService})] 
}) 
... 

Plunker example