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

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メソッドはngOnInitメソッド内に記述する方が良いです。

ng serveで実行します。

RxJSの使い道

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

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^