使用RxJs碰到的问题,如何防止重复订阅?
高洛峰
高洛峰 2016-10-28 14:33:08
[JavaScript讨论组]

使用的框架是:Angular2

我在两个组件ArticleListComponent和ArticleListFilterComponent,使用服务Service进行组件通信,定义了一个SearchService,用来响应ArticleListFilterComponent的变化,来更新ArticleListComponent的列表。

在ArticleListComponent的ngOnInit方法,添加如下代码,添加观察者来监控搜索过滤器的变化。

this.searchService.searchChange$.subscribe(
    change => {
        for (let key in change) {
            this.filter[key] = change[key];
        }
        //搜索的时候, 重置页数
        this.getArticles(true);
    }
);

但是有一个问题,在Angular2中Service是单例的,在每次我路由跳转到ArticleListComponent组件,会调用ngOnInit方法,导致会添加很多重复的订阅者。

有没有什么方法,能够清空订阅者,或者保持只有当前一个订阅者?

查了RxJs的文档,但没看到类似方法。不知道大神们有什么解决方法吗?谢谢大家。

================ 10-26 16:21 =================
期间在做其他项目,就暂时没管这个了。@Cheng_Gushu说的很对,但当时找文档,没有找到确切的使用方法(不得不吐槽下,RxJs的文档结构,感觉和PHPExcel的文档一样,没有比较清晰的树状结构)。

后面查了下StackOverflow,发现一哥们和我碰到一样的问题RXJS Observable unsubscribe。

执行subscribe方法后,会返回一个Subscription对象,此时通过调用返回对象的unsubscribe(在5.x之前的版本是使用dispose)来取消订阅。

具体代码如下:

#在ngOnInit方法添加订阅
this.service.searchSubscribe = this.searchService.searchChange$.subscribe(
    change => {
        xxx
    }
);
#在ngOnDestroy方法取消订阅
this.service.searchSubscribe.unsubscribe();


高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(1)
三叔

component destroy 的时候 unsubscribe 啊

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号