Не удалось определить правильный синтаксис EventEmitter или Observable в Angular2 Services

Мне трудно найти много примеров/руководств для использования наблюдаемых в службе Angular2. Существует материал для привязки html-шаблонов с помощью EventEmitter, но это не похоже на сервис.

Одна из главных движущих тем - это избавиться от Promises в Angular2, но я не могу получить новый синтаксис правильно.

Что я делаю

  • У меня есть FirebaseAuth Service, которая может быть добавлена ​​в другую услуг или компонентов.
  • У меня есть функция, которая выполняет асинхронный вызов firebase, в моем примере для создания пользователя
  • Я хочу вернуть Observable (для замены обещания), который другие службы могут использовать для выполнения других действий, таких как создание профиля при его разрешении.

Я в порядке, если Promises - лучшее решение для этого примера, но я хотел бы выяснить, что такое Наблюдаемый путь.

Моя служба:

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

Как мне переписать это для использования Observable и/или EventEmitter?

Ответы

Ответ 1

На самом деле это почти то же самое, есть несколько изменений

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

И тогда вы можете suscribe к нему (subscribe является эквивалентом then).

Здесь plnkr с примером использования Observables

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

EventEmitter, с другой стороны, Subject (документация немного отличается с тех пор angular2 переместился в последнюю версию, но он все еще понятен).

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

Здесь plnkr с примером использования EventEmitter.

Разница в супер коротком: Observable начинает испускать данные, когда находит подписчиков; Тема испускает информацию о том, есть ли подписчики или нет.

Примечание

В примере EventEmitter я использовал toRx(). Это предоставляет Subject, но его рефакторинг, и нам больше не понадобится toRx().

Полезные ресурсы Обновлено

RxJS In-Depth от Ben Lesh в конференции AngularConnect 2015.

Спасибо Робу Вормальду за указание на это

Вы можете увидеть беседу с Сарой Робинсон и ее демонстрационное приложение и увидеть, как он работает здесь