Angular 6 RXJS 导入语法？

Posted 2023-03-07

【中文标题】Angular 6 RXJS 导入语法？

【英文标题】：Angular 6 RXJS Import Syntax?

【发布时间】：2018-09-23 11:16:51

【问题描述】：

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

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

【问题讨论】：

不确定这是否是您要求的，但如果您还没有完成，您需要重构代码本身。有新的pipe 语法。像例如yourObservable$.pipe(map(val => val * 2)).subscribe()。因此，通过这种导入，您将不会使用yourObservable$.map(blah)。这里有一些参考：blog.angularindepth.com/…

见github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md

【参考方案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

使用throwError代替ErrorObservable。

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

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

【讨论】：

throw 现在有了一个新名称，即 throwError，您可以像这样导入它：import throwError from 'rxjs';

从 'rxjs' 导入它不会带来整个模块吗？更具体的导入路径是什么？

@KeyvanSadralodabai 不适用于 rxjs v6。显然他们已经根据this

进行了更改

【参考方案2】：

或者如果你想继续使用6.0.0 版本，你可以这样做

npm i --save rxjs-compat

添加反向兼容性

【讨论】：

看起来您现在可以进行 ng upgrade 以自动添加它（同时将 Angular 项目引用更新到最新版本）。

没有ng upgrade 命令。 ng update你的意思是不加包

【参考方案3】：

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

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

参考资料：

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

【讨论】：

如何将rxjs-5-to-6-migrate 放入PATH 变量中？在我运行npm i -g rxjs-tslint，然后运行rxjs-5-to-6-migrate 后，我得到rxjs-5-to-6-migrate is not recognized as an internal or external command

【参考方案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

【参考方案5】：

您只需要导入like 运算符

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