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

前端之家收集整理的这篇文章主要介绍了无法在Angular2服务中找出正确的EventEmitter或Observable语法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在Angular2服务中使用observables的例子/指南中,我很难找到很多东西。有一些html模板与EventEmitter绑定的东西,但这似乎不适合服务。

其中一个主要的主题就是远离Angions2中的Promises,但我似乎无法使新的语法正确。

我在做什么

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

如果承诺是这个例子的最佳解决方案,我很好,但我想知道可观察的方式是什么。

我的服务:

/*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?

其实几乎是同样的事情,有一些变化
createUser(user: any): any {
    return new Observable.create(observer => {
      this.ref.createUser(user,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);
        }
       });  
    })
  }

然后你可以嘲笑它(订阅相当于那时)。

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

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,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的例子中,我使用了Rx()。这暴露了主题,但it’s being refactored,我们将不再需要Rx()了。

有用资源更新

RxJS In-Depth由Ben Lesh在AngularConnect’s 2015会议上发表。

感谢Rob Wormald指出这一点

你可以看到Sara Robinson’s talk和她的demo app,看看它运行here

原文链接:https://www.f2er.com/angularjs/144147.html

猜你在找的Angularjs相关文章