Question

我很难找到在Angular2服务中使用observable的示例/指南的方法。 html模板的内容与 EventEmitter 绑定，但这似乎不适合服务。

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

我在做什么

我有 FirebaseAuth服务，可以注入其他人服务或组件。
我有一个执行异步调用的函数 firebase，在我的例子中创建用户
我想返回 Observable（替换承诺）其他服务可以用来执行其他操作，例如在解决此问题时创建个人资料

如果承诺是这个例子的最佳解决方案，我很好，但我想知道 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）。

这里有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()。

有用资源 已更新
Ben Lesh在RxJS In-Depth会议上的
AngularConnect's 2015。

感谢Rob Wormald指出这个

您可以看到Sara Robinson's talk和她的demo app并看到它正在运行here

无法在Angular2 Services

1 个答案: