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';

前两行可以编译，但我不知道如何获取 catch 和 throw 等。 .map() 在代码中使用时也会引发构建错误。

有人知道这是如何工作的吗？

Answer 1

从 rxjs 5.5 开始，catch 已重命名为 catchError 函数以避免名称冲突。

Due to having operators available independent of an Observable, operator names cannot conflict with JavaScript keyword restrictions. Therefore the names of the pipeable version of some operators have changed.

import { catchError } from 'rxjs/operators';

对于 throw 你可以使用 ErrorObservable.

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

rxjs 6

使用 throwError.

而不是 ErrorObservable

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

此外，您现在必须通过管道传递运算符，而不是直接将它们链接到可观察对象

Answer 2

或者，如果您想继续使用版本 6.0.0，您可以

npm i --save rxjs-compat

添加反向兼容性

Answer 3

运行运行 ng update 之后的这 2 个命令。这应该修复 rxjs 导入：

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

参考文献：

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

Answer 4

管道是操作员前进所需要的。

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

你只需要导入 like 运算符

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

Angular 6 RXJS 导入语法？

Angular 6 RXJS Import Syntax?

rxjs

angular

angular-observable