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

您可以尝试将其添加为NgModule中的提供程序，而不是将AccountService添加为app.component中的提供程序吗？

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

2 个答案: