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