angular升@^6版本依赖rxjs@^6中rxjs@^6版本中操作符和静态方法报错并改正

最近公司要把angular项目升级到最新版本,简单升级后系统是运行不起来的,其中就有rxjs的引入报错和rxjs一些操作符和静态方法的报错,花了一些时间排查rxjs的错误,下面就列举 Observable 静态方法和操作符引用错误及解决方法和小伙伴分享一下,帮助小伙伴节省排查时间,方便小伙伴举一反三,有不正确的地方欢迎小伙伴雅正。

rxjx@^5.0.0版本Observable、静态方法、操作符的引用方法在@^6中报的错误

import {Observable} from "rxjs/Observable";
import "rxjs/add/Observable/fromEvent";
import "rxjs/add/operator/map";
ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
src/app/common/services/http/api.ts(7,9): error TS2305: Module '"F:/exercises/myNG/node_modules/rxjs/Observable"' has no exported member 'Observable'.

ERROR in ./node_modules/rxjs/add/Observable/fromEvent.js
Module not found: Error: Can't resolve 'rxjs-compat/add/observable/fromEvent' in 'F:\exercises\myNG\node_modules\rxjs\add\Observable'

ERROR in ./node_modules/rxjs/add/Observable/fromEvent.js
Module not found: Error: Can't resolve 'rxjs-compat/add/observable/fromEvent' in 'F:\exercises\myNG\node_modules\rxjs\add\Observable'

rxjx@^6.0.0中的正确引用方法

import {Observable} from "rxjs/index"import {Observable} from "rxjs"这两种引用都是正确的,但是在webStorm中的第二种方法会有错误信息的提示,但是可以正常编译,因为编译的时候对象会自动检索rxjs文件夹下的index.d.ts文件,但是webStorm在显示的时候不会去检索,rxjs只是一个文件夹。
import {Observable} from "rxjs/index"; //Observable
import {fromEvent} from "rxjs/index";  //静态方法
import { map } from "rxjs/operators";  //操作符

注意:正确的引用还没有完,静态方法和操作符使用方法还有变化,下面是rxjs@^5版本的实用方法及报错信息

Observable.fromEvent(someDocumen, "someEvent").startWith(0).map()
ERROR in src/.... Property 'fromEvent' does not exist on type 'typeof Observable'.  
 
ERROR in src/....: error TS2339: Property 'startWith' does not exist on type 'Observable<Event>'.

ERROR in src/....: error TS2339: Property 'map' does not exist on type 'Observable<Event>'.

rxjs@^6版本的正确使用方法

静态方法直接调用就可以了,比以前版本方便不少,但是这个操作符要吐槽一下,完全没有以前的链式写法用着方便,看着舒服,理解着容易,差评!差评!!
fromEvent(someDocumen, "someEvent").pipe(
    startWith(0),
    map()
)

?catch操作符更名为catchError
?throw操作符更名为throwError

欢迎小伙伴点个赞 ??????????????????

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用RxJS的Observable和Subject来处理数据流可以帮助你更好地管理和处理异步操作。 首先,你需要在Angular项目导入RxJS库: ```typescript import { Observable, Subject } from 'rxjs'; ``` 接下来,你可以使用Observable来创建一个可观察对象,它可以发出一个或多个值,并且可以被订阅进行监听。例如: ```typescript const myObservable = new Observable((observer) => { observer.next('Hello'); observer.next('World'); observer.complete(); }); ``` 在上面的示例,我们创建了一个Observable,它发出了两个值('Hello'和'World'),然后通过调用`complete()`方法来表示数据流结束。 你还可以使用Subject来创建一个可观察的主题,它既是一个观察者,也是一个可被订阅的对象。它可以用来向订阅者广播值或事件。例如: ```typescript const mySubject = new Subject<number>(); // 向主题发送数据 mySubject.next(1); mySubject.next(2); // 订阅主题接收数据 mySubject.subscribe((value) => { console.log(value); // 输出:1, 2 }); ``` 在上面的示例,我们创建了一个Subject并向其发送了两个值(1和2),然后通过订阅Subject来接收这些值。 除了上述示例之外,RxJS还提供了丰富的操作符和方法,可以帮助你对数据流进行转换、过滤、组合等操作。你可以使用这些操作符来处理异步操作、处理HTTP请求、处理用户输入等场景。 总结起来,使用RxJS的Observable和Subject可以帮助你更好地处理和管理数据流,使你的代码具备更好的可读性和可维护性。你可以根据具体的需求使用RxJS提供的操作符和方法来进行进一步的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值