角2 - セッション変数をコンポーネント変数にリンクする

Question

サービスをインポートする2つのコンポーネントがあります。 このサービスはプロパティを持っています。

私はコンポーネントでこのプロパティを使用しています。 サービスプロパティが更新されたときに、その値へのコンポーネント参照を更新します。

サービス

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