无法找出 Angular2 服务中正确的 EventEmitter 或 Observable 语法

Question

我很难找到 examples/guides 在 Angular2 服务中使用可观察对象的方法。 html 模板与 EventEmitter 绑定，但这似乎不适合服务。

一个主要的驱动主题是远离 Angular2 中的 Promises，但我似乎无法正确使用新语法。

我在做什么

我有一个 FirebaseAuth 服务 可以注入其他服务或组件。
我有一个异步调用的函数 firebase，在我的示例中创建一个用户
我想return一个Observable（取代承诺）其他服务可以用来做其他事情，比如在解决这个问题时创建一个配置文件

如果 promises 是这个例子的最佳解决方案，我很好，但我想弄清楚 Observable Way 是什么。

我的服务：

/*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 and/or EventEmitter？

Answer 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 (documentation 有点不同，因为 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 但 it's being refactored 我们将不再需要 toRx()。

有用的资源 已更新

RxJS In-Depth by Ben Lesh in AngularConnect's 2015 会议。

感谢 Rob Wormald 指出这一点

可以看到Sara Robinson's talk and her demo app and see it running here

无法找出 Angular2 服务中正确的 EventEmitter 或 Observable 语法

Unable to figure out correct EventEmitter or Observable Syntax in Angular2 Services

service

observable

eventemitter

angular