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函数以避免名称冲突.

由于具有独立于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"));

此外,您现在必须管道运算符,而不是直接将它们链接到observable

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