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

Question

我很难找到在Angular2服务中使用observables的示例/指南的方式.有一些用于与EventEmitter绑定的html模板的东西,但这似乎不适合服务.

其中一个重要的驱动主题是远离Angular2中的Promise,但我似乎无法使新语法正确.

我在做什么

• 我有一个可以注入其他服务或组件的FirebaseAuth服务.
• 我有一个函数对firebase执行异步调用,在我的示例中创建用户
• 我想返回一个Observable(替换promise),其他服务可以用来做其他事情,比如在解决这个问题时创建一个配置文件

我很好,如果承诺是这个例子的最佳解决方案,但我想弄清楚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和/或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).

这是一个使用Observables的示例的plnkr

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由Ang Lesh在AngularConnect 2015年会议上深入研究.

感谢Rob Wormald指出这一点

你可以看到Sara Robinson的演讲和她的演示应用,看看它在这里运行