时间戳

首页 > 解决方案 > 订阅主题连续接收多次

angular - 订阅主题连续接收多次

问题描述

我正在使用 Subject 将信息传递到不同的页面，但是当我在 observable 中收到我的信息时，我多次收到它，而我只发送​​一次我猜问题来了，因为我在它之后更改了页面

我的主题

public handleUpdate = new Subject<any>();

updateHandleSearch(): Observable<any> {
    return this.handleUpdate.asObservable();
}

updatingHandleSearch(providerResponse: any) {
    this.handleUpdate.next(providerResponse);
}

我的观察者

Main.component.ts
this.dealPageService.updateHandleSearch().subscribe(test => {
    this.dealPageService.isLoading = true;
    this.handleShowAll(test);
});

SideBar.component.ts
updateSearch(deal) {
    this.router.navigate(['/deals']);
    this.dealPageService.updatingHandleSearch(deal);
}

标签： angularrxjs

解决方案

问题是，一旦您订阅了 Observable，您就必须取消订阅。

否则，您将遇到常见的内存泄漏。

在演示中，您有基本的应用程序（路由）和两个组件和一个共享服务。每次导航到新路由时，都会创建一个新的组件实例，而旧的组件实例将被销毁 (ngOnDestroy)。

如果您忘记取消订阅，则该组件将保持活动状态，您的订阅仍将接收数据。检查控制台输出。

为了更好地识别组件，我为控制台输出添加了一个instanceId字段。

在本地保存您的订阅：

subs: Subscription;
...
this.subs = this.updateHandleSearch.updateHandleSearch()

要试验并解决此问题，请取消注释此行：

this.subs.unsubscribe();

检查此stackblitz以获得有效的演示。

推荐阅读