KATUBLO
2019年06月14日

【初心者必読】AngularのRxjsの使い方をサンプルコードで解説

こんにちは。KATUOです。今回は「angularのrxjs」について解説していこうと思います。

 

バイト先ではangularを使って書いています。その中でangularが公式に採用している「リアクティブプログラミング(RXJS)」に関する理解を深めるべきだと感じたので簡単なコードを利用して

その全貌をざっくり理解してみることにします。

 

observableを実装

observerのnuxtでデータを流す

 

dataにはnextで投げられたstring型が渡されます。Observable < string > とすることでnextが投げるものはstring型として定義することができます。

 

 

Subjectを実装

Subjectとは

subjectを使うと任意のタイミングでデータを流すことが可能となります。通常のobservableではインスタンス生成時にしか、データを流すことできないのです。次に紹介するコードだとsubjectを呼び出す毎にデータを流すことができることが確認できます。

 

Subjectを使ったコード

 

implementsを使うことでインターフェイスを実装することができます。これはclassのextendに似ています。ちなみに今回は < number > と書かれているので流す値の型はnumberですね。

 

他のコンポーネントのデータを使用

サービスをDIすることで他コンポーネントのデータを使用

providedIn: ‘root’とすることでシングルトンのサービスならば
どこからでもデータを取得することが可能になります。

 

他コンポーネントのプロパティを変える

ログインとログアウト状態を判別するboolean値をobservarbleバターンを使って実装してみます。

 

データやりとりの中心となるSessionService

 

 

このserviceでboolean値であるloginプロパティの値をlogin、logoutメソッドで変えています。

 

他コンポーネントでserviceを呼び出す

 

 

それぞれのコンポーネントからserviceのプロパティの値を変更することができます。

 

参考文献

https://qiita.com/Yamamoto0525/items/efc0e5617c7427fea86a

最後まで読んで頂き、ありがとうございました。
SNS等でのシェアが頂ければ幸いです!

プロフィール

@KATUO

現在都内私立大学に通う大学4年生。大学では電気電子工学を専攻。大学2年の夏頃に、プログラマーの長期インターン募集の広告が目に止まり、独学でプログラミングの学習をスタート。この時期からプログラミングにどハマりし、現在までに「AIスタートアップ」「Webマーケティング会社」でエンジニアとしての業務に没頭してきた。

スポンサードリンク

大学生必見就活イベント