关于Angular的RxJS6的新特性的一次踩坑体验

最新推荐文章于 2025-06-14 09:00:05 发布

原创最新推荐文章于 2025-06-14 09:00:05 发布 · 543 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#RxJS #Angular

前端专栏收录该内容

2 篇文章

订阅专栏

本文记录了在Angular4中使用RxJS进行观察者模式编程时遇到的版本问题及解决方法。作者在尝试运行一个过滤并处理数组元素的示例时，因RxJS版本更新导致原有代码无法运行，通过调整引入方式和使用pipe操作符成功解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在网上找一些学习视频学习Angular4，学到了"观察者模式与RxJS"这一部分，参照视频中的案例写demo，然后就开始踩坑了。。。

原demo：

//在一个Angular组件构造函数中添加观察
//具体处理逻辑为过滤出数组中的偶数，并且求平方，然后在构造结束后打印“结束了”
constructor() {
    Observable.from([1,2,3,4])
        .filter(e =>e%2 == 0)
        .map(e => e*e)
        .subscribe(
            e => console.log(e),
            err => console.error(err),
            () => console.log("结束了!")
        )
)

问题来了：

我不知道为什么就是找不到Observable.from()这么个方法，仔细检查引入都对，简直崩溃了（最烦这些非逻辑性的错误）。最终找到原因了：原demo里的RxJS版本为6.0之前，而RxJS6之后的版本特性发生了部分改变，具体哪些改变我就不赘述了，留下参考的博客地址：https://www.cnblogs.com/timetimetime/p/9139926.html，https://www.imooc.com/article/70323

原因知道后，就可以着手解决了，下面为我修改后的相应代码：

/* 引入部分修改 */
import {from} from 'rxjs';
import {filter, map} from 'rxjs/operators';


//对应代码修改
constructor() {
    from([1,2,3,4]).pipe(
      filter(e =>e%2 == 0),
      map(e => e*e),
    ).subscribe(
      e => console.log(e),
      err => console.error(err),
      () => console.log("结束了!")
    )
）

本人水平有限，如果理解有错漏之处，欢迎路过的大神指正！