RxJS の BehaviorSubject を share しようとして上手く行かなかったやつと上手く行ったやつ

以前はまったやつの備忘録 たぶん Angular 5.0.x, RxJS 5.5.x くらい

BehaviorSubject で Shared Service を作った時に、フィールドの Observable を直接参照するのではなく、メソッドを介して Observable を返す処理があった¹

以下のように share した subject を分けると1度しか subscribe できない

import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { share, tap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li>counter: {{counter}}
      <li>direct: {{direct|async}}
      <li>return: {{returnValue|async}}
      <li>direct2: {{direct|async}}
      <li>return2: {{returnValue|async}}
    </ul>
    `,
})
export class AppComponent  implements OnInit {
  direct: Observable<string>;
  returnValue: Observable<string>;

  message$: Observable<string>;
  subject: BehaviorSubject<string> = new BehaviorSubject<string>('initial');

  counter: number = 0;

  ngOnInit() {
    this.message$ = this.subject.asObservable().pipe(tap(() => this.counter++), share());
    this.direct = this.message$;

    this.returnValue = this.getObservable();
    this.subject.next('Hello!');
  }

  getObservable(): Observable<string> {
    return this.message$;
  }
}

share しないと複数回呼べる

stackblitz.com

Observable の Cold/Hot についてまだちゃんと理解できてないと感じたので、改めて調べよう

---

1. 一度投げたエンドポイントには2回目は投げず前回取得したやつを使う、エンドポイントは不定、みたいなキャッシュ機構を作っていた↩