概要
AngularのPipeの中にはAync PipeというPromiseやObservableな非同期オブジェクトをそのままtemplateで表示できるPipeがあります。 今回はその使い方を紹介します。
環境
- angular 2.4.8
- rxjs 5.2.0
async pipeのメリット
主なメリットは以下の2つです。
フロントではメモリ管理が大切なので、特に後者は嬉しいメリットですね。
続きを読む以前Prefix Query の注意 - Carpe Diemで述べたように、PrefixQueryはsearch queryがnot_analyzed
になるので意図しない結果になることがあります。
一方で前方一致は検索の利便性を向上させる上でメリットが大きいので、入れておきたい要素でもあります。
今回は前方一致を考える上で何が良いかを調べてみました。
Observableを学ぶ上でCold ObservableとHot Observableの違いを理解していた方が良いと聞いたので調べてみました。
Cold Observable | Hot Observable | |
---|---|---|
イメージ | オンデマンド再生のような、選んだら再生。 再生するシーンは開始タイミングに依るので、人によってそれぞれ |
テレビのような垂れ流し。 再生するシーンは皆同じ。 |
データの開始タイミング | subscribe()されたら | connect()されたら |
データを流すStreamの数 | subscribeしてる数 | 1つ。いくつsubscribeしても同じStreamを見る |
データを受け取るStreamの数 | subscribeしてる数 | subscribeしてる数。 送信してるStreamは1つでも、unsubscribeは受信してる個々で行う必要がある |
AngularでHttpModuleを連続して使う必要が出た時に、「毎回subscribeでネストが深くなるのが嫌だなぁ」と思ってぐぐったところ、「flatMapを使うと良いよ!」という記事を見つけて使ってみようとしたのがきっかけです。
他のmapやfilterなどと違ってパッと理解できなかったのと、lodashのflatMap(arrayをflattenするやつ)のイメージのせいで詰まったのでまとめました。
公式のflatMapのイメージ図は以下です。
ref: ReactiveX - FlatMap operator
初見だと分かりづらいですね。
なので map(itemを変換)とmerge(複数のObservableを束ねる)がくっついたもの と考えるとイメージしやすいです。