RxJs可观察的重复值
RxJs可观察的重复值
提问于 2018-08-19 21:34:42
所以我有一个非常简单的场景。一个主题和可观察性。当客户端登录时，我发布成功，当用户注销时，我发布假。
问题出在LoginComponent的subscribe方法中，第一次一切都运行得很好。用户登录我得到一个事件，但之后当用户第二次注销并再次登录时，我会得到2个相同的事件，同样，如果用户注销然后登录，我会得到3个重复的事件，以此类推。
AuthService.ts
public _loggedIn: Subject<LoggedInOrResetPassword> = new Subject();
public loggedId: Observable<LoggedInOrResetPassword> = this._loggedIn.asObservable();
obtainAccessToken(){
// ommitted
this.httpClient.post(environment.baseUrl + url, null, requestOptions)
.subscribe(data => {
this.saveToken(data);
this._loggedIn.next(LoggedInOrResetPassword.createTrue());
});
// ommitted
}
private logout(navigateTo?: string){
this._loggedIn.next(LoggedInOrResetPassword.createFalse());
}LoginComponent.ts
ngOnInit() {
this.authservice.loggedId.subscribe( ( loggedInOrResetPassword: LoggedInOrResetPassword ) => {
// HERE I GET DUPLICATE VALUES
});Stack Overflow用户
回答已采纳
发布于 2018-08-19 22:52:05
原因是当LoginComponent被销毁时，您并没有取消订阅。
您的代码应按如下方式进行更改
首先，向LoginComponent添加一个实例属性来存储订阅，例如
export class LoginComponent implements OnInit, OnDestroy {
.....
loginSubscription: Subscription;
.....
}然后更改ngOnInit，以便将订阅存储在新添加的属性中
ngOnInit() {
this.loginSubscription = this.authservice.loggedId.subscribe( ( loggedInOrResetPassword: LoggedInOrResetPassword ) => {
// HERE I GET DUPLICATE VALUES
});最后添加ngOnDestroy以确保在组件被销毁时取消订阅
ngOnDestroy {
if (this.loginSubscription) {
this.loginSubscription.unsubscribe();
}
}看看Angular的async管道，它是订阅可观察对象和自动取消订阅的另一种方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51918182
复制相关文章
相似问题
腾讯云开发者
