Nie można znaleźć poprawnego EventEmitter lub Observable Syntax w Angular2 Services

Question

Mam problem ze znalezieniem wielu przykładów/poradników dotyczących używania obserwowalnych w usłudze Angular2. Istnieje wiele rzeczy, które mogą być powiązane z szablonami html z EventEmitter, ale to nie jest dobre dla usługi.

Jednym z głównych motywów jazdy jest ucieczka od obietnic w Angular2, ale wydaje mi się, że nowa składnia nie jest poprawna.

co robię

• Mam FirebaseAuth usługi, które mogą być wstrzykiwane do innych usług lub komponentów.
• Mam funkcji, które wykonuje połączenia asynchronicznego do Firebase, w moim przykładzie, aby utworzyć użytkownika
• chcę zwracają Obserwowalne (wymienić obietnicę) że inne usługi mogą korzystać robić inne rzeczy, takie jak utworzyć profil, gdy ten zostanie rozwiązany

jestem w porządku, jeśli obietnice są najlepszym rozwiązaniem dla tego przykładu, ale chciałbym, aby dowiedzieć się, co Obserwowalne Way jest.

Moje życzenie:

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

Jak bym przepisać to do korzystania Obserwowalne i/lub EventEmitter?

Answer 1

Właściwie to prawie to samo, istnieje kilka zmian

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

a następnie można suscribe do niego (subscribe jest odpowiednikiem then).

Oto plnkr z przykładu używając obserwable

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

EventEmitter z drugiej strony jest Subject (documentation różni się trochę od angular2 przeniósł się do ostatniej wersji, ale to jeszcze zrozumiałe).

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

Oto plnkr z przykładu używając EventEmitter.

Różnica w super-short: Observable rozpoczyna emisję danych po znalezieniu subskrybentów; Temat emituje informacje o tym, czy są subskrybenci, czy nie.

Uwaga

W przykładzie EventEmitter użyłem toRx(). To ujawnia Subject, ale it's being refactored i nie będziemy już potrzebować toRx().

Przydatne zasobyUpdated

RxJS In-Depth Ben Lesh w AngularConnect's 2015 konferencji.

Dzięki Rob Wormald dla wskazując tę ​​

Widać Sara Robinson's talk i jej demo app i zobaczyć go w ruchu here