Angular 2 - 将会话变量链接到组件变量

Question

我有2个导入服务的不同组件。 该服务有一个属性。

我在组件中使用此属性。 我希望在更新services属性时更新对该值的组件引用。

服务

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

@Injectable() 
export class SessionService { 

    private loggedIn: boolean = false; 

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


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

组件属性：

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

组件的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> 

当我通过一个按钮来更改会话值它不更改组件中的值。

感谢

Answer 1

你需要这样做：

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

因为你isSignedIn变量只计算一次

下面是完整的代码：

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

和工作plunker： Plunker