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

ng serveで実行します。

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

RxJSの使い道

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

コメント

株式会社CONFRAGE ITソリューション事業部をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

タイトルとURLをコピーしました