angular2 - Servicewert nicht ändern

Question

Ich habe eine Route namens home und es hat drei Kinderwege, Dokumente, Mail und Müll. In der Home-Route-Komponente hat es eine Variable namens 'myUser'. Ich habe einen Dienst erstellt, sodass alle Benutzer den Wert myUser teilen können, aber aus irgendeinem Grund ändert sich der Wert der Dienstvariablen nicht.
Dienst

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

Startseite (Eltern-Route)

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(); 
    } 
} 

Mail (Kind Route)

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); 
    } 
} 

Answer 1

Sie haben HomeService in beiden bootstrap Funktion in Abhängigkeit Array oder MainComponent Anbieter zu injizieren damit der Dienst nur einmal instanziiert wird.

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

und entfernen HomeService von providers Array von Metadaten beiden Komponenten.