Angular2: Zentraler Sitzungsdienst?

Question

Ich arbeite an einer Angular2 App, wo der Benutzer regsiter und loggen kann. Um die Sitzung zu behandeln - für den Zweck dieser Diskussion bedeutet dies nur eine Flagge, wenn der Benutzer, wenn eingeloggt oder nicht - Ich habe einen Service erstellt, der aussieht dies:

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

Jetzt habe ich die isLoggedIn() -Methode in meiner Vorlage verwenden möchten, um zu zeigen, oder bestimmte Elemente der Benutzeroberfläche/Menüpunkte zu verbergen. Frage ist einfach: Wie kann ich eine zentrale Instanz dieses Dienstes während meiner gesamten Anwendung verwenden?

Ich habe versucht, so etwas für meine 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) {} 
} 

Und im Grunde das gleiche für auf andere (Kind) Komponente:

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

Meine Beobachtungen mit diesem sind: - In der Konsole Ich sehe die Ausgabe "New SessionService" zweimal (siehe Konstruktor von SessionService) - Wenn ich die Methode this._sessionService.logOut() in der LoginComponent alle Elemente an _sessionService.isLoggedIn() der Vorlage von L auslösen oginComponent verschwindet/erscheint, aber für andere gebundene Elemente in der App-Vorlage ändert sich nichts.

Habe ich hier ein grundlegendes Missverständnis von Angular2? Ist dieser Ansatz sinnvoll? Wenn nein, was wäre eine Alternative?

Vielen Dank!

PS: Ich hoffe, dass die Menge an Code nicht zu viel ...

ist in Ihrem LoginComponent

Answer 1

Ihr Problem ist. Setzen Sie das SessionService nicht in das Array providers. Dies erstellt eine zweite Instanz.

Setzen Sie die SessionService in die Anbieter der übergeordneten Komponente, die allen Komponenten gemein ist, die den Dienst verwenden werden. Dadurch wird es für alle untergeordneten Komponenten verfügbar. In diesem Fall nur die AppComponent.

Dann können Sie einfach die SessionService in den Konstruktor jeder untergeordneten Komponente, die es verwenden wird.