service - que - pasar datos entre componentes angular 5

No se puede encontrar el EventEmitter correcto o la sintaxis observable en los servicios Angular2

Question

Me cuesta mucho encontrar ejemplos / guías para el uso de observables en un servicio Angular2. Hay cosas para el enlace de plantillas html con EventEmitter pero eso no parece correcto para un servicio.

Uno de los grandes temas de conducción es alejarse de Promesas en Angular2 pero parece que no puedo corregir la nueva sintaxis.

Que estoy haciendo

• Tengo un servicio FirebaseAuth que se puede inyectar en otros servicios o componentes.
• Tengo una función que realiza una llamada asíncrona a firebase, en mi ejemplo para crear un usuario
• Quiero devolver un Observable (para reemplazar la promesa) que otros servicios pueden usar para hacer otras cosas como crear un perfil cuando esto se resuelva

Estoy bien si las promesas son la mejor solución para este ejemplo, pero me gustaría averiguar qué es el Camino observable .

Mi servicio

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

¿Cómo reescribiría esto para usar Observable y / o EventEmitter?

Answer 1

En realidad es casi lo mismo, hay algunos cambios.

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

Y luego puede suscribe a él ( subscribe es el equivalente de then ).

Aquí hay un plnkr con un ejemplo usando observables

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

EventEmitter por otro lado, es un Subject (la documentation difiere un poco desde que angular2 se trasladó a la última versión, pero aún es comprensible).

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

Aquí hay un plnkr con un ejemplo usando EventEmitter.

La diferencia en súper corto: Observable comienza a emitir los datos cuando encuentra suscriptores; El sujeto emite información si hay suscriptores o no.

Nota

En el ejemplo de EventEmitter utilicé toRx() . Esto expone al Subject pero se está reformulando y ya no necesitaremos toRx() .

Recursos útiles actualizados

RxJS In-Depth por Ben Lesh en la conferencia de AngularConnect en 2015 .

Gracias a Rob Wormald por señalar esto

Puedes ver la charla de Sara Robinson y su aplicación de demostración y verla here