Angular のObservable とSubject でRxJSの仕組みを理解する

Angular のObservable とSubject でRxJSの仕組みを理解する

RxJSを使って簡単なデータの受け渡しをします。

まずコンポーネントを作成します。

ちなみにAngular6の場合はrxjs-compatをインストールしておく必要があります。(Angular 5では不要な気がします。)

参考サイト

Angular のRxjs(リアクティブプログラミング)は、サーバプッシュ型の通信方法になります。Observableクラスでサーバのデータを観察し、データ変更に対してリアクティブ(反応する)アプリを構築することが可能です。

Subjectクラスで任意のタイミングでリアクティブ(発火)する

ユーザがクリックしたタイミングなど、任意のタイミングでリアクティブにしたい場合は、Subjectクラスを使用すれば可能です。

以下、簡単なコンポーネントを作成します。

abc.component.ts

Subject<void>にしたので、next()メソッドに引数はありませんが、Subject<number>とかにすると、next(1)というようにnumber型の引数を渡せます。

これはsubscribeのアロー関数の引数も同じくnumber型を渡すことができます。(今回はvoidなので引数はありません)

メソッド名 振舞い
subscribe 購読する
next データを流しこむ

subscribeメソッドとnextメソッドを使用してデータの受け渡しを実現します。メソッドの振る舞いは上記のとおりです。また、subscribeメソッドはngOnInitメソッド内に記述する方が良いです。

ng serveで実行します。

Angular のObservable とSubject でRxJSの仕組みを理解する

RxJSの使い道

どこでこんな仕組みを使うかというと、おそらくコンポーネント間は疎結合であるべきでAコンポーネントからの通知はBサービスを通してCコンポーネントに通知したほうが良いからだと思います。パブサブの仕組みが元なんだと思われます。だからViewChildなど使うべきじゃないはずです。密になっちゃうからです。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA