Impossibile capire EventEmitter o sintassi osservabili corretti nei servizi Angular2

Question

Ho difficoltà a trovare molto in termini di esempi/guide per l'utilizzo di osservabili in un servizio Angular2. Ci sono cose per i modelli html che si legano con EventEmitter ma questo non sembra giusto per un servizio.

Uno dei grandi temi di guida è allontanarsi da Promises in Angular2 ma non riesco a ottenere la nuova sintassi corretta.

Quello che sto facendo

• Ho un FirebaseAuth Servizioche può essere iniettato in altri servizi o componenti.
• ho una funzione che fa una chiamata asincrona per Firebase, nel mio esempio per creare un utente
• voglio restituire un osservabile (per sostituire la promessa) che altri servizi possono utilizzare per fare altre cose come creare un profilo quando questo viene risolto

sto bene se le promesse sono la soluzione migliore per questo esempio, ma mi piacerebbe capire quale sia il osservabile Way è.

mio servizio:

/*DS Work on firebase Auth */ 
import {Injectable} from 'angular2/angular2'; 

@Injectable() 
export class FirebaseAuth { 
    ref = new Firebase('https://myfirebase.firebaseio.com'); 
    //check if user is logged in 
    getAuth(): any { 
    return this.ref.getAuth(); 
    } 

    //register a new user 
    createUser(user: any): Promise<any> { 
    return new Promise((resolve, reject) => { 
     this.ref.createUser(user, function(error, userData) { 
     if (error) { 
      reject(error); 
      console.log('Error creating user:", error'); 
     } else { 
      resolve(userData); 
      console.log('Successfully created user account with uid:', userData.uid); 
     } 
     }) 
    }) 
    } 
}; 

Come dovrei riscrivere questa opzione per utilizzare osservabili e/o EventEmitter?

Answer 1

in realtà è quasi la stessa cosa, un paio di modifiche

createUser(user: any): any { 
    return new Observable.create(observer => { 
     this.ref.createUser(user, function(error, userData) { 
     if (error) { 
      observer.error(error); 
      console.log("Error creating user:", error); 
     } else { 
      observer.next('success'); 
      observer.complete(); 
      console.log('Successfully created user account with uid:', userData.uid); 
     } 
     }); 
    }) 
    } 

e poi si può suscribe ad esso (subscribe è l'equivalente di then).

Ecco un plnkr con un esempio utilizzando osservabili

constructor() { 
    this.createUser({}).subscribe(
     (data) => console.log(data), // Handle if success 
     (error) => console.log(error)); // Handle if error 
} 

EventEmitter d'altra parte è un Subject (documentation differisce un po 'da quando angular2 spostato l'ultima versione, ma è ancora comprensibile).

_emitter = new EventEmitter(); 
constructor() { 
    // Subscribe right away so we don't miss the data! 
    this._emitter.toRx().subscribe((data) => console.log(data), (err) => console.log(err)); 
} 
createUser(user: any) { 
    this.ref.createUser(user, function(error, userData) { 
     if (error) { 
      this._emitter.throw(error); 
      console.log('Error creating user:", error'); 
     } else { 
      this._emitter.next(userData); 
      this._emitter.return(); This will dispose the subscription 
      console.log('Successfully created user account with uid:', userData.uid); 
     } 
    }) 
} 

Ecco un plnkr con un esempio utilizzando EventEmitter.

La differenza in super breve: Observable inizia a emettere i dati quando trova gli abbonati; Oggetto emette informazioni se ci sono abbonati o meno.

Nota

Nell'esempio EventEmitter ho usato toRx(). Questo espone il Subject ma it's being refactored e non avremo più bisogno di toRx().

Risorse utiliAggiornato

RxJS In-Depth da Ben Lesh in AngularConnect's 2015 conferenze.

Grazie a Rob Wormald per sottolineare questo

Si può vedere Sara Robinson's talk e il suo demo app e vederlo correre here