Angular のObservable とSubject でRxJSの仕組みを理解する
RxJSを使って簡単なデータの受け渡しをします。
まずコンポーネントを作成します。
ng generate component abc
ちなみにAngular6の場合はrxjs-compatをインストールしておく必要があります。(Angular 5では不要な気がします。)
npm i rxjs-compat --save
Angular のRxjs(リアクティブプログラミング)は、サーバプッシュ型の通信方法になります。Observableクラスでサーバのデータを観察し、データ変更に対してリアクティブ(反応する)アプリを構築することが可能です。
Subjectクラスで任意のタイミングでリアクティブ(発火)する
ユーザがクリックしたタイミングなど、任意のタイミングでリアクティブにしたい場合は、Subjectクラスを使用すれば可能です。
以下、簡単なコンポーネントを作成します。
ng generate component abc
abc.component.ts
import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { Subject } from 'rxjs/Subject'; @Component({ selector: 'app-abc', template: ` <button (click)='onXXX()' type='button'>ボタン</button><br> {{num}} `, styleUrls: ['./abc.component.css'] }) export class AbcComponent implements OnInit { private sub: Subject<void> = new Subject(); public get Sub (): Observable<void> { return this.sub.asObservable(); } num = 0; constructor() { } ngOnInit() { this.Sub.subscribe(()=>{ this.num++; }) } onXXX() { this.sub.next(); } }
Subject<void>にしたので、next()メソッドに引数はありませんが、Subject<number>とかにすると、next(1)というようにnumber型の引数を渡せます。
これはsubscribeのアロー関数の引数も同じくnumber型を渡すことができます。(今回はvoidなので引数はありません)
メソッド名 | 振舞い |
---|---|
subscribe | 購読する |
next | データを流しこむ |
subscribeメソッドとnextメソッドを使用してデータの受け渡しを実現します。メソッドの振る舞いは上記のとおりです。また、subscribeメソッドはngOnInitメソッド内に記述する方が良いです。
ng serve
で実行します。
RxJSの使い道
どこでこんな仕組みを使うかというと、おそらくコンポーネント間は疎結合であるべきでAコンポーネントからの通知はBサービスを通してCコンポーネントに通知したほうが良いからだと思います。パブサブの仕組みが元なんだと思われます。だからViewChildなど使うべきじゃないはずです。密になっちゃうからです。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント