Service Mit den Daten zwischen den Komponenten zu teilen

Question

ich einige Daten zwischen zwei meiner Komponenten zu teilen habe versucht. Die Komponenten sind sowohl in meiner Hauptkomponente durch die routerOutlet gezeigt, die wie folgt aussieht:

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){ 

} 

} 

Ich habe eine Login-Komponente, wo ich versuche, einen Wert in meinem Dienst zu setzen, wie folgt aus:

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

} 

Die setAccount Methode wird von meiner Vorlage aufgerufen. Jetzt, in einer anderen Komponente, versuche ich, das Konto aus dem Dienst zu bekommen und den Benutzernamen anzuzeigen, was nicht funktioniert. Die anderen Komponenten wie folgt aussehen:

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

ich die Benutzername wie dies in der Vorlage bin Anzeige:

{{accountService.getAccount().name}} 

Schließlich ist hier, mein Service:

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

} 

Was soll ich tun falsch?

EDIT: Es scheint, dass das Problem ist, dass die Seite neu geladen wird, wenn die zweite Komponente angezeigt wird, was bewirkt, dass dieser Dienst neu zu starten? Hier ist der HTML-Code Anmeldungskomponente, wie ich das Problem vermuten könnte sich hier ein:

<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

Sie BehaviorSubject verwenden können.

Ihr Dienst sollte wie folgt aussehen:

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

dann in Ihrem 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') 
} 

in Ihrem 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() 
} 

in Ihrem Hause Vorlage es so {{account.name}}

verwenden 10

hoffe das hilft!

Answer 2

Statt Account als Anbieter in app.component hinzuzufügen, können Sie es als Anbieter in Ihrer NgModule Versuchen Sie?