新米エンジニアの失敗再発防止メモ

自分そしてこの世界の皆が、同じ失敗をしないためのメモ

Twitterやってます!@rakuton_t
欲しいものリストのブタメンを送ってくれた方、ありがとうございます!

【Angular】subscribeの処理はコンポーネント側で定義しなければならない

subscribeの処理はサービスクラス側で定義できないようです

サービスクラス側で定義しても動きません。

例えばFirebaseのリアルタイムデータベースからユーザー情報を取得する処理を実装するとします。
UserServiceクラスを作成するとします。

[UserService.ts]

  constructor(public db: AngularFirestore) {
  }
  ovserveUser(uid: string) {
    if (uid != null) {
      this.usersObservable = this.db.collection('user').doc<Object>(uid).valueChanges();
      this.usersObservable.subscribe(data => {
          this.user = new User(data);
      });
    }
  }

[コンポーネントクラス]

  constructor(public userService: UserService) {
     this.userService.ovserveUser(ユーザーID);
  }

なーんてすれば、
userService の this.user を参照すればいつでも最新のユーザー情報が取れると思うじゃないですか。
違うんですよ。
サービスクラスでsubscribeしても、流れてきたデータを処理してくれないんですよね。
無視です。無視されます。
つまり this.user はずっと null のままです。

なので、サービスクラスでできるのは

Observable型である、これを返してあげることぐらいです。

  this.db.collection('user').doc<Object>(uid).valueChanges();

この部分はコンポーネントクラス側で書いてあげなくちゃいけません。

      ...subscribe(data => {
          this.user = new User(data);
      });

※ただ、正直言ってAngularはまだ勉強中ですので、なんか間違ってたり良い方法あったりしたら教えてください

私の記事が役に立ったら、どうぞ何か買ってください!→ Amazon欲しいものリスト