javascript - 使用RxJs碰到的问题，如何防止重复订阅？

问题描述

问 题

使用的框架是: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();

解决方案

component destroy 的时候 unsubscribe 啊

这篇关于javascript - 使用RxJs碰到的问题，如何防止重复订阅？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！