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功能，以避免名称冲突。

由于操作符可以独立于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导入：

npm i -g rxjs-tslint
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';

Angular 6 RXJS导入语法？

5 个答案: