首页  >  问答  >  正文

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

使用的框架是:Angular2

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

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

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

但是有一个问题,在Angular2Service是单例的,在每次我路由跳转到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();
天蓬老师天蓬老师2720 天前628

全部回复(3)我来回复

  • ringa_lee

    ringa_lee2017-04-11 13:29:20

    component destroy 的时候 unsubscribe 啊

    回复
    0
  • 迷茫

    迷茫2017-04-11 13:29:20

    谢邀,抱歉,我目前还不会Angular

    • -!更别说Angular2

    回复
    0
  • PHP中文网

    PHP中文网2017-04-11 13:29:20

    Observable.of(someEvent).share()

    回复
    0
  • 取消回复