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の仕組みを理解する

株式会社CONFRAGE

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

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

コメントをどうぞ

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

CAPTCHA