Angular 2 - Session-Variable mit Komponentenvariablen verknüpfen

Question

Ich habe 2 verschiedene Komponenten, die einen Service importieren. Dieser Service hat eine Eigenschaft.

Ich verwende diese Eigenschaft in den Komponenten. Ich möchte den Komponentenverweis auf diesen Wert aktualisieren, wenn die services -Eigenschaft aktualisiert wird.

Der Service

import { Injectable } from '@angular/core'; 

@Injectable() 
export class SessionService { 

    private loggedIn: boolean = false; 

    isLoggedIn():boolean{ 
     return this.loggedIn; 
    } 


    setLoggedIn(isLoggedIn: boolean){ 
     this.loggedIn = isLoggedIn; 
    } 
} 

Die Komponenten Eigenschaft:

isSignedIn: boolean = this.session.isLoggedIn(); 

Der Bereich der Komponenten html:

<div *ngIf="isSignedIn"> 
     <sd-header-signed-in></sd-header-signed-in> 
    </div> 
    <div *ngIf!="isSignedIn"> 
     <sd-header-signed-out></sd-header-signed-out> 
    </div> 

Als ich den Sitzungen Wert über eine Taste ändert sich nicht Ändern Sie den Wert in der Komponente.

Dank

Answer 1

Sie müssen dies tun:

<div *ngIf="session.isLoggedIn()"> 
    <sd-header-signed-in></sd-header-signed-in> 
</div> 
<button (click)="session.setLoggedIn(true)">Set session</button> 

Weil Ihre isSignedIn Variable nur einmal

Hier ausgewertet wird, ist der vollständige Code:

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

import { Injectable } from '@angular/core'; 

@Injectable() 
export class SessionService { 

    private loggedIn: boolean = false; 

    isLoggedIn():boolean{ 
     return this.loggedIn; 
    } 

    setLoggedIn(isLoggedIn: boolean){ 
     this.loggedIn = isLoggedIn; 
    } 
} 

@Component({ 
    selector: 'first-component', 
    template: ` 
    <div> 
     <h2>FirstComponent</h2> 
    </div> 
    `, 
}) 
export class FirstComponent { 
    constructor(public sessionService: SessionService) { 

    } 
} 


@Component({ 
    selector: 'second-component', 
    template: ` 
    <div> 
     <h2>SecondComponent</h2> 
     <ng-content></ng-content> 
    </div> 
    `, 
}) 
export class SecondComponent { 
    constructor(public sessionService: SessionService) { 

    } 
} 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <button (click)="sessionService.setLoggedIn(true)">Set session</button> 
     <first-component *ngIf="sessionService.isLoggedIn()"></first-component> 
     <second-component *ngIf="sessionService.isLoggedIn()"> 
     <button (click)="sessionService.setLoggedIn(false)">Remove session</button> 
     </second-component> 
    </div> 
    `, 
}) 
export class App { 
    constructor(public sessionService: SessionService) { 

    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, SecondComponent,FirstComponent ], 
    providers: [SessionService], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Und arbeitender Plünderer: Plunker