2016-08-03 20 views
0

私は自宅と呼ばれるルートを持っています.3つの子ルート、ドキュメント、メール、ごみがあります。ホームルートコンポーネントには、 'myUser'という変数があります。 myUser値をすべて共有できるようにサービスを作成しましたが、何らかの理由でサービス変数の値が変更されません。
サービスangular2 - サービス値が変更されない

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

@Injectable() 
export class HomeService { 
    // Mock user, for testing 
    myUser = {name:"John", loggedIn:true}; 

    setUser(name:string){ 
    this.myUser.name = name ; 
    } 

    isLogged():boolean { 
    if(this.myUser.loggedIn == true){ 
     return true ; 
    } 
    return false ; 
    } 
} 

ホーム(親ルート)

import { Component } from '@angular/core'; 
import { Router, ROUTER_DIRECTIVES } from '@angular/router'; 
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from '@angular/common'; 
import { Http, Headers } from '@angular/http'; 
import { contentHeaders } from '../common/headers'; 

import { HomeService } from '../../home.service'; 


const template = require('./home.component.html'); 
const styles = require('./home.component.css'); 

@Component({ 
    selector: 'home', 
    directives: [ CORE_DIRECTIVES, FORM_DIRECTIVES ], 
    template: template, 
    styles: [ styles ], 
    providers: [HomeService] 
}) 

export class HomeComponent { 
    constructor(public router: Router, private homeService: HomeService) { 

    } 
    myUser = this.homeService.myUser ; 

    setUser(name:string){ 
    this.homeService.setUser(name); 
    } 

    // Is logged in 
    isLogged():boolean { 
    return this.homeService.isLogged(); 
    } 
} 

メール(子ルート)あなたは依存関係の配列またはMainComponentプロバイダのいずれかでbootstrap関数にHomeServiceを注入する必要が

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from '@angular/common'; 
import { HomeService } from '../../home.service'; 


const template = require('./mail.component.html'); 
const styles = require('./mail.component.css'); 

@Component({ 
    selector: 'mail', 
    directives: [ CORE_DIRECTIVES, FORM_DIRECTIVES ], 
    template: template, 
    styles: [ styles ], 
    providers: [HomeService] 
}) 

export class MailComponent { 
    constructor(public router: Router, private homeService: HomeService) { 

    } 

    myUser = this.homeService.myUser ; 

    setUser(name:string){ 
    this.homeService.setUser(name); 
    } 
} 

答えて

2

サービスは一度だけインスタンス化されます。

bootstrap(MainComponent, [HomeService, ....other dependency...]) 

そして両成分メタデータのproviders配列からHomeServiceを除去します。

+0

この方法を試しましたが、問題は解決しません。 – John

+0

@ジョンあなたは両方の 'component'から' providers'配列から 'HomeService'を取り除かなければなりません.. –

+0

ええ、プロバイダを削除したときにあなたの編集を見ただけです。何故ですか? – John

関連する問題