41

我正在将 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() 在代码中使用时也会引发构建错误。

任何人都可以参考这应该如何工作？

4

5 回答 5

24

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

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

于 2018-04-13T07:17:59.497 回答
11

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

版本：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
于 2018-05-20T07:43:11.383 回答
6

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

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

参考：

于 2018-05-15T04:28:15.013 回答
5

或者，如果您想继续使用6.0.0您所做的版本

npm i --save rxjs-compat

添加反向兼容性

于 2018-05-04T20:47:17.027 回答
0

您只需要导入 like 运算符 

import { Observable } from 'rxjs';
import { map, catchError, timeout } from 'rxjs/operators';
于 2019-04-05T14:34:05.210 回答