javascript - 使用RxJs碰到的问题,如何防止重复订阅?
天蓬老师
天蓬老师 2017-04-11 13:27:20
0
3
624

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

欢迎选择我的课程,让我们一起见证您的进步~~

répondre à tous(3)
左手右手慢动作

component destroy 的时候 unsubscribe 啊

迷茫

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

  • -!更别说Angular2

洪涛

Observable.of(someEvent).share()

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!