Question

我正在使用“主题”将信息传递到其他页面，但是当我以可观察的方式接收到信息时，我会多次收到它，而一次只能发送一次我想问题来了，因为我之后要更改页面

我的主题

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);
}

Answer 1

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

否则，您将发生常见的内存泄漏。

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

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

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

在本地保存您的订阅：

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

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

this.subs.unsubscribe();

选中此stackblitz可获得有效的演示。

Answer 2

是的，您不使用退订并获得多个值。您还可以使用.pipe（takeUntil（...））运算符在使用ngOnDestroy方法时获得对组件的退订效果。有时候非常有帮助

订阅主题连续收到多个时间

2 个答案: