zu teilen Daten zwischen Services und Komponenten

Question

Ich habe eine angular2 Anwendung, in der ich eine Login-Seite haben. Nach der Anmeldung möchte ich den Benutzernamen in der Header-Komponente anzeigen.

@Output() getUserName = new EventEmitter(); 

im Authentifizierungsmethode Service

authenticate(loginRequest) { 
    let headers = new Headers({ 'Content-Type' : 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    let authenticateResp = this.http.post("http://localhost:8080/authenticate", JSON.stringify(loginRequest), options).map(result => result.json()); 
    authenticateResp.subscribe((authenticate => { 
     this.getUserName.emit("My Name"); 
    }));  

    return authenticateResp; 
} 

In der Header-Komponente in Konstruktor

@Component({ 
..... 
providers:[LoginService] 
}) 
export class HeaderComponent { 
    userName : string; 
    constructor(private loginService : LoginService) { 

     loginService.getUserName.subscribe(authenticated => this.setName(authenticated)); 
    } 

    setName(authenticated) { 
    this.userName = authenticated; 
    } 

} 

Wenn ich debuggen, kann ich das Ereignis Emissions Code immer ausgeführt, aber der Code in subscribe in der Komponente wird nicht aufgerufen. Was mache ich hier falsch?

Jede mögliche Hilfe schätzen

Answer 1

@Output() und EventEmitter nicht dazu gedacht sind, in einem Dienst verwendet werden, da sie designed for inter-component communication sind.

EventEmitter ist (vorerst) eine Unterklasse von Subject, ein Standard-Subject, wird nicht den letzten emittierten Wert im Speicher halten, so dass, wenn ein Wert ausgegeben wird, während kein Teilnehmer ist, wurde der Wert einfach ignoriert.

A ReplaySubject wird der zuletzt emittierten Wert zu jedem neuen Teilnehmer wiederholen.

Hinweise:

• es ist eine gute Praxis nur Observable statt Subject aussetzen.
• Sie möchten nicht authenticateResp innerhalb Ihrer authenticate-Methode abonnieren und authenticateResp zur gleichen Zeit zurückgeben, da dies die Anforderung zweimal auslöst, wenn Sie den zurückgegebenen Wert abonnieren. Sie sollten den Operator do() verwenden, das Observable zurückgeben und abonnieren, wo Sie diese Daten benötigen.

private _userName = new ReplaySubject<string>(); 

userName=this._userName.asObservable(); 

authenticate(loginRequest) { 
    let headers = new Headers({ 'Content-Type' : 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.post("http://localhost:8080/authenticate", JSON.stringify(loginRequest), options) 
     .map(result => result.json()) 
     .do((authenticate => this._userName.next("My Name")));  
} 

und innerhalb Ihrer Komponente:

loginService.userName.subscribe(authenticated => this.setName(authenticated));