Angular2: Central Session Service?

Question

Sto lavorando su un'app Angular2 in cui l'utente può registrarsi e accedere. Per gestire la sessione - ai fini di questa discussione questo significa solo un flag se l'utente se ha effettuato l'accesso o meno - Ho creato un servizio che assomiglia questo:

import {Injectable} from 'angular2/core'; 

@Injectable() 
export class SessionService { 
    private _status:boolean; 

    constructor() { 
    if(1 == 1) { 
     this._status = true; 
    } 
    console.log("New SessionService"); 
    } 

    isLoggedIn() { 
    return this._status; 
    } 

    logOut() { 
    this._status = !this._status; 
    } 
} 

Ora voglio utilizzare il metodo isLoggedIn() nel mio modello per visualizzare o nascondere alcuni elementi elementi dell'interfaccia utente/menu. La domanda è semplicemente: come posso utilizzare un'istanza centrale di questo servizio nell'intera mia intera applicazione?

Ho provato qualcosa di simile per il mio AppComponent:

(...) 
import {SessionService} from '../services/session.service'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app/app.component.html', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [SessionService] 
}) 
@RouteConfig([ 
    ... 
]) 
export class AppComponent { 
    constructor(private _userService: UserService, private _sessionService: SessionService) {} 
} 

E in fondo la stessa cosa per il altro (bambino) componente:

(...) 
import {SessionService} from '../services/session.service'; 

@Component({ 
    templateUrl: 'app/user/login.component.html', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [HTTP_PROVIDERS, UserService, SessionService] 
}) 
export class LoginComponent { 
    model = {email: "", password: ""} 

    constructor(private _userService: UserService, private _sessionService: SessionService) {} 

    onSubmit() { 
     this._sessionService.logOut(); 
    } 
} 

mie osservazioni con questo sono: - Nella console Vedo l'output "New SessionService" due volte (vedi costruttore di SessionService) - Quando si attiva il metodo this._sessionService.logOut() nel LoginComponent tutti gli elementi associati a _sessionService.isLoggedIn() del modello di L oginComponent scompare/appare, ma per gli altri elementi associati nel modello di app, non cambia nulla.

Ho un malinteso di base di Angular2 qui? Questo approccio è ragionevole? Se no, quale sarebbe un'alternativa?

Grazie mille!

PS: Spero che la quantità di codice non è troppo ...

Answer 1

Il tuo problema è nella tua LoginComponent. Non inserire il numero SessionService nell'array providers. Questo crea una seconda istanza.

Inserire il SessionService nei provider del componente principale comune a tutti i componenti che utilizzeranno il servizio. Questo lo renderà disponibile a tutti i suoi componenti figlio. In questo caso, solo il AppComponent.

Quindi, è possibile inserire lo SessionService nel costruttore di ciascun componente figlio che lo utilizzerà.