angular2 - 服务价值不变答案

【问题标题】：angular2 - Service value not changingangular2 - 服务价值不变
【发布时间】：2016-12-09 18:23:59
【问题描述】：

我有一条叫做 home 的路由，它有三个子路由，documents，mail 和垃圾箱。在主路由组件中，它有一个名为“myUser”的变量。我创建了一个服务，所以他们都可以共享 myUser 值，但由于某种原因，服务变量值没有改变。
服务

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

邮件（子路由）

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

【问题讨论】：

标签： javascript angularjs typescript angular routes

【解决方案1】：

您必须将HomeService 注入到依赖数组中的bootstrap 函数或MainComponent 提供程序中，这样服务只会实例化一次。

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

然后从两个组件元数据的providers 数组中删除HomeService。

【讨论】：

@John 你必须从providers 数组中删除HomeService component..
是的，我刚刚看到您的编辑，当我删除提供程序时它有效。这是为什么呢？
@John 因为当你将它添加到那里时，它会重新实例化 HomeService 实例......因为你想使用第一个生成的实例......这就是为什么你不应该注入 HomeService提供者数组中的依赖项..
好的，所以我必须将它注入到主要组件提供程序中。我应该像我的所有服务所在的主服务一样创建，所以我不必在我的主组件中调用这么多服务吗？
不，不要创建新服务。您必须将所有 services 包含到 Providers 数组中。这将解决一个问题。