Angular 6 RXJS 導入語法？

Question

我正在將 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';

前兩行可以編譯，但我不知道如何捕獲和拋出例如。 .map() 在代碼中使用時也會引發構建錯誤。

任何人都可以參考這應該如何工作？

Answer 1

從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"));

此外，您現在必須通過管道傳輸運算符，而不是將它們直接鏈接到可觀察對象

Answer 2

管道是操作員前進所必需的。

版本：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

Answer 3

或者，如果您想繼續使用6.0.0版，您可以

npm i --save rxjs-compat

添加反向兼容性

Answer 4

運行ng update后運行這兩個命令。 這應該修復 rxjs 導入：

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

參考資料：

• https://github.com/ReactiveX/rxjs-tslint

Answer 5

你只需要像運營商一樣導入

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