web-dev-qa-db-ja.com

Angular2サービスで正しいEventEmitterまたは監視可能な構文を理解することができません

Angular2サービスでオブザーバブルを使用するための例/ガイドを見つけるのに苦労しています。 EventEmitterを使用してバインドするhtmlテンプレート用のものがありますが、サービスには適切ではないようです。

大きな推進テーマの1つは、Angular2のPromisesからの脱却ですが、新しい構文を正しく理解できていないようです。

私がやっていること

  • FirebaseAuth Serviceがあり、他のサービスやコンポーネントに挿入できます。
  • 私の例では、ユーザーを作成するために、firebaseへの非同期呼び出しを行う関数があります
  • これを解決したときに、他のサービスがプロファイルの作成などの他のことを実行するために使用できるObservable（to promise to replace the promise）を返したい

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やEventEmitterを使用するようにこれをどのように書き換えますか？

serviceobservableangulareventemitter
18
Dennis Smolek

実際はほとんど同じですが、いくつか変更があります

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

以下は、EventEmitterを使用した例の plnkr です。

スーパーショートの違い：Observableは、サブスクライバーが見つかるとデータの出力を開始します。サブジェクトはサブスクライバーの有無にかかわらず情報を発信します。

注

EventEmitterの例では、toRx()を使用しました。これはSubjectを公開しますが、 リファクタリング中 であり、toRx()は不要になります。

便利なリソース更新

RxJS In-DepthAngularConnect's 2015 カンファレンスのBen Leshによる。

これを指摘してくれたRob Wormaldに感謝

あなたは Sara Robinsonの講演 と彼女の デモアプリ を見て、それが実行されているのを見ることができます here

22
Eric Martinez