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

【问题标题】：Angular 2 Observable emit/error functions are ignored after calling error function onceAngular 2 Observable 发射/错误函数在调用错误函数一次后被忽略
【发布时间】：2017-03-20 23:53:48
【问题描述】：

我有一个 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的error事件函数之前已经被调用过，那么之后调用emit和/或error函数将被忽略。

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

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

我使用 observables 的想法错了吗？
为什么调用错误函数后事件流挂了一次？
谁能给我一个提示来解决这个问题（某种解决方法，例如）？

【问题讨论】：

看起来，如果发生错误（在 HTTP 代码如 4XX 或 5XX 处），流会挂起。我不知道如何解决这个问题，是我错了还是对了，不可能使用我描述的 API 或 this example 中提到的类似方法和 Angular 2 / Observables？我无法想象...

标签： api http angular typescript observable

【解决方案1】：

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

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

【讨论】：