Angular2 Inietta il servizio in un altro servizio crea 2 istanze

Question

Ho due servizi: AuthService e MonBanquetService e AuthService dipende da MyService. Ecco il codice di base di questi 2 servizi:

AuthService.ts:

import {Inject, Injectable} from 'angular2/core'; 
import {MonBanquetService} from '../monbanquet.service' 

@Injectable() 
export class AuthService { 

    public username: string; 

    constructor(protected _monBanquetService: MonBanquetService) { 
     // do something() 
    } 

} 

MonBanquetService.ts

import {Injectable, Component} from 'angular2/core'; 
import {Http, Headers, Response} from 'angular2/http'; 
import {Router} from 'angular2/router'; 

@Injectable() 
export class MonBanquetService { 

    constructor(public http: Http, private _router: Router) { 
     console.log('MonBanquetServices created'); 
    } 
} 

e ho messo questi due servizi come fornitori in boot.ts:

bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, {useClass: HashLocationStrategy}), 
    HTTP_PROVIDERS, 
    MonBanquetService, 
    AuthService 
]); 

Tuttavia, quando eseguo l'app, vedo i due registri della console 'MonBanquetServices creati'. Pensavo che i servizi dovessero essere singoletti, come mai ci sono due istanze?

Grazie.

Answer 1

Angolare mantiene una singola istanza per provider. Se aggiungi un tipo come provider in più punti, questo si traduce in più istanze.

Quando viene richiesta una chiave (tipo, token) da DI, cerca la gerarchia e restituisce l'istanza dal primo provider che trova.

Pertanto, se si desidera un'istanza globale, solo aggiungerlo alla lista fornitori di

bootstrap(AppComponent, [MonBanquetService]) 

@NgModule(
    providers: [MonBanquetService], 
    .... 
) 
export class AppMpdule{} 

o come suggerito dal team angolare per fornitori personalizzati all'elenco dei provider del componente root

@Component({ 
    selector: 'my-app', 
    providers: [MonBanquetService] 
}) 
class AppComponent { 
} 

Answer 2

Forse hai aggiunto il servizio nell'attributo "provider" del tuo componente. In questo caso, verrà creata un'istanza del servizio per ogni istanza del componente. E quello che hai specificato quando il bootstrap della tua applicazione non sarà preso in considerazione per questo servizio ...

Sarebbe a causa di iniettori gerarchici. Fore maggiori dettagli, si potrebbe avere uno sguardo a questa domanda:

• What's the best way to inject one service into another in angular 2 (Beta)?

Answer 3

In realtà non dovrebbe. Devi assicurarti di non utilizzare i metadati providers nel decoratore @Component.

Guardate qui

• http://plnkr.co/edit/9Kg0DR36nuoTxRUNlIGY?p=preview

cercato di attuare ciò che avete mostrato e di lavoro come previsto;