[英]angular2 - Service value not changing
我有一條叫做家的路線,它有三個子路線,文件,郵件和垃圾箱。 在本地路由組件中,它具有一個名為“ 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);
}
}
您必須將HomeService
注入到Dependency數組或MainComponent
提供bootstrap
功能中,以便該服務僅實例化一次。
bootstrap(MainComponent, [HomeService, ....other dependency...])
然后從兩個組件元數據的providers
數組中刪除HomeService
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.