RxJs Observable 重复值

Question

所以我有一个非常简单的方案。一个主题和可观察的。当客户端登录时我发布成功，当用户注销时我发布错误。

问题出在 LoginComponent 的订阅方法中第一次一切都很好。用户登录我得到一个事件，但在那之后当用户第二次注销并再次登录时我得到 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
});

Answer 1

原因是当 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 管道作为订阅 Observables 并自动取消订阅的替代方法。

RxJs Observable 重复值

RxJs Observable duplicate values

rxjs

angular2-observables

behaviorsubject