api - Angular 2 Observable 发射/错误函数在调用一次错误函数后被忽略

Question

我有一个 API 登录服务，它使用 http 服务来执行登录逻辑(LoginApiService、login-api.service.ts):

login(data: LoginCredentials): Observable<LoginResult> {
  let body = JSON.stringify( data );
  let headers = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({ headers: headers });

  return this.http.post(`${this.getBaseUrl()}/login`, body, options)
                  .map(this.extractData)
                  .catch(function(error: Response){
                    return Observable.throw(error); // IF YOU TRY TO LOGIN WITH WRONG CREDENTIALS, AN ERROR WILL BE THROWN
                  });
}

此服务用于全局服务类(authService、auth.service.ts):

login(data: LoginCredentials): void {
    this.api.login(data).subscribe(
    data => {
      this.isLoggedIn = true;
      this.group = data.group;
      this.Login.emit(new LoginResult(this.group)); // THE CALL OF THIS FUNCTION IS IGNORED IF THE "this.Login.error" FUNCTION HAS BEEN CALLED BEFORE
    },
    error => {
      this.Login.error(error); // THIS IS IGNORED TOO, IF IT WAS CALLED BEFORE
    }
  );
}

组件(LoginComponent、login.component.ts):

ngOnInit() {
  this.LoginSubscription = this.authService
    .Login
    .subscribe( // THE EVENTS ARE NOT FIRED IF THE ERROR EVENT HAS BEEN FIRED BEFORE ONCE
      data => {
        if ( this.authService.isLoggedIn ) {
          this.router.navigate(['/dashboard']);
        }
      },
      error => {
        this.handleError(error);
      }
    );
}

login() {
  this.authService.login( new LoginCredentials(this.user, this.password) );
}

模板(login.component.html):

<div>
  <label>User: </label>
  <input [(ngModel)]="user" placeholder="user">
</div>
<div>
  <label>Password: </label>
  <input [(ngModel)]="password" placeholder="password" type="password">
</div>

<p>
  <button (click)="login()">Login</button>
</p>

如果 login observable 的错误事件函数之前被调用过，那么之后调用 emit 和/或 error 函数将被忽略。

• 使用正确的登录凭据，模拟 API 响应 HTTP代码 200，一切正常
• 凭据错误，HTTP 响应为 500
• 再次调用 API 后(使用正确或错误的凭据)，事件不再触发

这意味着:如果您使用了错误的登录凭据，您将无法在不重新加载页面的情况下重试。

• 我使用 observables 的想法是错误的吗？

• 为什么调用error函数后事件流就挂了一次？

• 有人可以给我提示来解决这个问题吗(某种解决方法，例如)？

Answer 1

发生这种情况是因为您出错了 EventEmitter。 EventEmitter 基本上是 Observable，当 Observer 调用 error 或 complete 时，它会关闭 Obersvable。关闭的 Observable 将按设计停止发出事件。

要解决您的问题，请删除 LoginComponent 中的 this.Login.error(error);。这样您就不会关闭该 EventEmitter。尝试用逻辑替换它以告诉用户凭据错误或一些其他消息来描述错误。