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