英文:
ngOnDestroy not clearing value
问题
我遇到一个问题，即我订阅的以下服务在我离开组件时没有被清除。
在下面的代码中，我正在使用 data 值进行控制台输出。第一次进入组件时，data 的值是{}。然后我有一段代码，在旅程中继续填充 data。
然而，如果我离开组件，我有一个 ngOnDestroy 方法，应该清除订阅，但我看到的情况是，当我再次进入组件时，data 仍然被填充。
这是我的代码：
TS
private subscriptions: Subscription[] = [];
this.subscriptions.push(this.accordianStateService.openState$.subscribe(data => {
console.log(data)
}));
ngOnDestroy() {
this.subscriptions.forEach((sub) => {
sub.unsubscribe();
});
}
Service
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SidePanelAccordionService {
private _openStateBehaviorSubject = new BehaviorSubject<{ id: string; state: boolean }>({ id: '', state: false });
public openState$ = this._openStateBehaviorSubject.asObservable();
public setOpenState(data: { id: string, state: boolean }) {
this._openStateBehaviorSubject.next(data);
}
}
有没有关于为什么数据没有正确取消订阅的想法？
英文:
I am having an issue where the below service that I subscribe to is not being cleared when I leave the component
I am consoling out the data value below. The first time I get to the component the value of data is {}. Then I have code that populates data as i continue in the journey.
However if I leave the component I have an ngOnDestroy method which should clear the subscription but what I am seeing is that when I come back to the component data is still populated
Here is my code
TS
private subscriptions: Subscription[] = [];
this.subscriptions.push(this.accordianStateService.openState$.subscribe(data => {
console.log(data)
}));
ngOnDestroy() {
this.subscriptions.forEach((sub) => {
sub.unsubscribe();
});
}
Service
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SidePanelAccordianService {
private _openStateBehaviorSubject = new BehaviorSubject<{ id: string; state: boolean }>({} as { id: string; state: boolean });
public openState$ = this._openStateBehaviorSubject.asObservable();
public setOpenState(data: { id: string, state: boolean }) {
this._openStateBehaviorSubject.next(data);
}
}
Any idea why the data is not being unsubscribed to correctly?
答案1
得分: 2
因为你使用了 BehaviorSubject，它会将最后发出的值发送给每个新的订阅者。
示例（来自上面的 learnrxjs）：
import { BehaviorSubject } from 'rxjs';
const subject = new BehaviorSubject(123);
// 两个新的订阅者将获得初始值 => 输出：123, 123
subject.subscribe(console.log);
subject.subscribe(console.log);
// 两个订阅者将获得新值 => 输出：456, 456
subject.next(456);
// 新的订阅者将获得最新值（456） => 输出：456
subject.subscribe(console.log);
// 所有三个订阅者将获得新值 => 输出：789, 789, 789
subject.next(789);
// 输出：123, 123, 456, 456, 456, 789, 789, 789
因此，当你发送新值、销毁组件，然后再次创建组件时，新的组件将获得最后设置的值，而不是初始值。
英文:
It's populated because you used BehaviorSubject, which sends last emitted value to every new subscriber.
Example (from the learnrxjs above):
import { BehaviorSubject } from 'rxjs';
const subject = new BehaviorSubject(123);
// two new subscribers will get initial value => output: 123, 123
subject.subscribe(console.log);
subject.subscribe(console.log);
// two subscribers will get new value => output: 456, 456
subject.next(456);
// new subscriber will get latest value (456) => output: 456
subject.subscribe(console.log);
// all three subscribers will get new value => output: 789, 789, 789
subject.next(789);
// output: 123, 123, 456, 456, 456, 789, 789, 789
So, when you send new value, destroy the component and then create component once again, the new component will get the last set value, not the initial one.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论