[解決済み] rxjsからObservableをインポートする最良の方法

質問

私のアンギュラー2アプリでは、サービスにおいて Observable クラスから rxjs クラスを作成します。

import { Observable } from 'rxjs';

今のところ、私はただ Observable を使うようにしています。 toPromise() 関数を使用することができます。

どこかのStackOverflowの別の質問で読んだのですが、この方法でインポートして、さらに rxjs/Rx から不必要なものを大量にインポートしてしまうということを読みました。 rxjs ライブラリから不必要なものを大量に取り込み、ページのロード時間やコードベースを増加させます。

私の質問は、インポートするための最良の方法は何かということです。 Observable を使用できるように toPromise() を使うことができるのでしょうか？

どのように解決するには？

Rxjs v 6.*.

rxjsの新しいバージョンで簡素化されました。

1) 演算子

import {map} from 'rxjs/operators';

2) その他

import {Observable,of, from } from 'rxjs';

チェーン接続の代わりに、パイプ接続が必要です。例えば

古い構文です。

source.map().switchMap().subscribe()

新しい構文です。

source.pipe(map(), switchMap()).subscribe()

注意 いくつかの演算子は、JavaScriptの予約語と名前の衝突があるため、名前が変更されています! これらは以下の通りです。

do -> tap ,

catch -> catchError

switch -> switchAll

finally -> finalize

Rxjs v 5.* のリリース。

私は演算子をインポートする必要があるたびにドキュメントをチェックし続けるので、私は自分自身を助けるために部分的にこの答えを書いています。何かがより良い方法で行うことができる場合、私に知らせてください。

1) import { Rx } from 'rxjs/Rx' ;

これはライブラリ全体をインポートします。そうすれば、各オペレータの読み込みを気にする必要はありません。しかし、Rxを追加する必要があります。 ツリーシェイクで必要な関数だけを選んで最適化できればいいのですが(要検証) コメントにもあるように、tree-shakingではどうしようもない。つまり、これは最適化された方法ではないのです。

public cache = new Rx.BehaviorSubject('');

または、インポートすることができます 個々の 演算子を使うこともできます。

これは、これらのファイルのみを使用するようにアプリを最適化します。 :

2) import { _______ } from 'rxjs/_________';

この構文は通常、以下のようなメインオブジェクトに使用されます。 Rx そのもの、あるいは Observable など。

この構文で取り込むことができるキーワード

 Observable, Observer, BehaviorSubject, Subject, ReplaySubject

3) import 'rxjs/add/observable/__________';

Angular 5 のための更新

rxjs 5.5.2+を使用するAngular 5で

import { empty } from 'rxjs/observable/empty';
import { concat} from 'rxjs/observable/concat';

これらは通常、Observableを直接伴います。例えば

Observable.from()
Observable.of()

その他、この構文でインポートできるキーワードは以下の通りです。

concat, defer, empty, forkJoin, from, fromPromise, if, interval, merge, of, 
range, throw, timer, using, zip

4) import 'rxjs/add/operator/_________';

Angular 5 のための更新

rxjs 5.5.2+を使用するAngular 5で

import { filter } from 'rxjs/operators/filter';
import { map } from 'rxjs/operators/map';

これらは通常、Observableが作成された後にストリームでやってきます。例えば flatMap のようになります。

Observable.of([1,2,3,4])
          .flatMap(arr => Observable.from(arr));

その他、このような構文によるキーワードがあります。

audit, buffer, catch, combineAll, combineLatest, concat, count, debounce, delay, 
distinct, do, every, expand, filter, finally, find , first, groupBy,
ignoreElements, isEmpty, last, let, map, max, merge, mergeMap, min, pluck, 
publish, race, reduce, repeat, scan, skip, startWith, switch, switchMap, take, 
takeUntil, throttle, timeout, toArray, toPromise, withLatestFrom, zip

フラットマップ : flatMap のエイリアスです。 mergeMap をインポートする必要があります。 mergeMap を使うために flatMap .

のメモ /add 輸入品 :

インポートはプロジェクト全体で一度だけ行う必要があります。そのため、一箇所で行うことをお勧めします。複数のファイルに含まれていて、そのうちの1つを削除すると、間違った理由でビルドが失敗します。