使用服务在组件之间共享数据

Question

我一直在试图在我的两个组件之间共享一些数据。该组件通过routerOutlet在我的主要成分，它看起来像这样既显示：

import { Component } from '@angular/core'; 
import { AccountService } from './account.service'; 

@Component({ 
moduleId: module.id, 
selector: 'my-app', 
templateUrl: 'app.component.html', 
providers: [AccountService] 
}) 
export class AppComponent { 

constructor(public accountService:AccountService){ 

} 

} 

我在那里，我想在我的服务设置值登录组件，如：

import { Component } from '@angular/core'; 
import { AccountService } from './account.service'; 

@Component({ 
moduleId: module.id, 
selector: 'login-component', 
templateUrl: 'login.component.html', 
}) 
export class LoginComponent { 


constructor(public accountService:AccountService){ 
} 

setAccount(userName: string, password: string){ 
    this.accountService.setAccount(userName,password); 
} 

} 

setAccount方法从我的模板中调用。现在，在另一个组件中，我试图从服务中获取帐户并显示用户名，但这不起作用。另一个组成部分是这样的：

import { Component } from '@angular/core'; 
import { AccountService } from './account.service'; 

@Component({ 
moduleId: module.id, 
selector: 'home-component', 
templateUrl: 'home.component.html', 
}) 

export class HomeComponent { 


constructor(public accountService:AccountService){ 
} 
} 

我的模板显示的用户名是这样的：

{{accountService.getAccount().name}} 

最后，这里是我的服务：

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


export class Account{ 
name: string; 
password: string; 
} 

@Injectable() 
export class AccountService { 

private account = {name: "", password: ""}; 

getAccount(){ 

return this.account; 
} 

setAccount(username: string, password: string){ 
this.account.name = username; 
this.account.password = password; 
} 

} 

我在做什么错误？

编辑：看来问题是，当第二个组件显示，重新加载页面，导致该服务重新启动？这里是我的登录组件的HTML，因为我怀疑问题可能是在这里：

<div class="topbar"> 
    <a title="Made for the University of Southern Denmark." href="login.html"> 
     <img src="img/sdulogo.png"> 
    </a> 
</div> 
<div class="logincontainer"> 
<img src="img/profilepic.png"> 
    <form action="/home"> 
     <div class="form-input"> 
      <input #username type="text" id="username" 
      placeholder="Enter Username" required> 
     </div> 

      <div class="form-input"> 
      <input #password type="password" id="password" 
      placeholder="Enter Password" required> 
     </div> 
     <button (click)="setAccount(username.value, password.value)" type="submit" class="btn-login">LOGIN</button><br> 
     <a href="http://www.google.dk">Create Account</a><br> 
     <a href="#">Forgot Password?</a> 
     <p>{{accountService.getAccount().name}}</p> 
    </form> 


</div> 

Answer 1

可以使用BehaviorSubject。

您的服务应该是这个样子：

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

export class Account{ 
    name: string; 
    password: string; 
} 

@Injectable() 
    export class AccountService { 

    private account: BehaviorSubject<Account>; 

    constructor() { 
     this.account = <BehaviorSubject<Account>>new BehaviorSubject({}); 
    } 
    getAccount(){ 
     return this.account.asObservable(); 
    } 

    setAccount(username: string, password: string){ 
     this.account.next({name: username, password: password}) 
    } 
} 

然后在login.component.ts：

constructor(private accountService:AccountService){} 

setAccount(userName: string, password: string){ 
    this.accountService.setAccount(userName,password); 
} 

ngOnInit(): void { 
    // example of usage 
    this.setAccount('admin', 'admin') 
} 

在home.component.ts：

private account:Account; 
constructor(private accountService:AccountService){} 

getAccount() { 
    this.accountService.getAccount().subscribe(account => this.account = account) 
} 

ngOnInit(): void { 
    // example of usage 
    this.getAccount() 
} 

在你的家庭模板中使用它就像这样{{account.name}}

希望这有助于！

Answer 2

除了在app.component中添加AccountService作为提供者，您可以尝试将它作为提供者添加到您的NgModule中吗？