web-dev-qa-db-ja.com

Angular 6 RXJSインポート構文？

Angular 5アプリを最新のCLIとAngular 6 RCに移行していますが、Observableのインポートがすべて壊れています。 Angular 6はインポートの動作を変更しますが、構文の動作に関する明確な参照は見つかりません。

私はこれを5で持っていて、うまくいきました：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

今、新しい構文で私はそれを見る

import { Observable, Subject, throwError} from 'rxjs';
import { map } from 'rxjs/operators';

最初の2行はコンパイルされますが、たとえばcatchとthrowを取得する方法がわかりません。 .map（）は、コードで使用されるとビルドエラーもスローします。

誰がこれがどのように機能するかについての参照を持っていますか？

angularrxjsangular-observable
39
Rick Strahl

rxjs 5.5 から、catchは名前の衝突を避けるためにcatchError関数に名前が変更されました。

Observableとは無関係に演算子を使用できるため、演算子名はJavaScriptキーワードの制限と競合することはできません。そのため、一部の演算子のパイプ可能なバージョンの名前が変更されました。

import { catchError } from 'rxjs/operators';

throwには、ErrorObservableを使用できます。

import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
ErrorObservable.create(new Error("oops"));

rxjs 6

ErrorObservableの代わりに throwError を使用します。

 import { throwError } from 'rxjs'
 throwError(new Error("oops"));

また、オペレータを監視可能オブジェクトに直接チェーンするのではなく、パイプする必要があります

22
Suraj Rao

パイプは、今後のオペレーターに必要なものです。

バージョン：rxjs 6.0.1

例：

import { Observable } from "rxjs";
import { map } from "rxjs/operators";

Observable.create((observer: any) => {
    observer.next('Hello')
}).pipe(map((val: any) => val.toUpperCase()))
  .subscribe((x: any) => addItem(x))


function addItem(val: any) {
    console.log('val', val);
}

//output - (In uppercase)
HELLO
11
Dash

または、バージョン6.0.0を使い続けたい場合

npm i --save rxjs-compat

逆互換性を追加するには

5
Pian0_M4n

ng updateの実行後にこれら2つのコマンドを実行します。これにより、rxjsインポートが修正されます。

  1. npm i -g rxjs-tslint
  2. rxjs-5-to-6-migrate -p src/tsconfig.app.json

参照：

4
user8152243

同様の演算子をインポートするだけです

import { Observable } from 'rxjs';
import { map, catchError, timeout } from 'rxjs/operators';
0
vishal