angular 2 - 在 http 错误处理程序中注入服务答案

【问题标题】：angular 2 - Injected service in http error handlerangular 2 - 在 http 错误处理程序中注入服务
【发布时间】：2016-10-25 14:53:11
【问题描述】：

我有一个方法 handleError() 就像在文档https://angular.io/docs/ts/latest/guide/server-communication.html#!#error-handling 中一样

private handleError(error: any) {
    console.error(error);
    console.log(this.loginService); // <- always undefined
    return Observable.throw(error);
}

我的问题是，this.loginService 是 undefined，尽管它已正确注入我的班级。它已在其他方法中使用，但在 handleError 中似乎不可用。

http-catch 调用方法的方式可能是问题吗？如果是这样，我该如何解决？处理错误时需要执行一些逻辑。

这是一个关于我如何将 handleError 方法设置为回调的示例（就像文档一样）

this.http.get(url,
              ApiRequest.ACCEPT_JSON)
              .map(ApiHelper.extractData)
              .catch(this.handleError);

【问题讨论】：

您是否将loginService 传递给类构造函数？
是的。我已经在同一个类的其他方法中使用它。
你能告诉我们你如何在你的捕获中调用handleError吗？
我更新了我的问题。

标签： angular angular2-http angular2-injection

【解决方案1】：

由于您直接传递函数，因此您没有类的 this 上下文。一个非常简单且最佳实践的方法是使用 lambda 或“胖箭头函数”：

this.http.get(url, ApiRequest.ACCEPT_JSON)
    .map(res => ApiHelper.extractData(res))
    .catch(err => this.handleError(err));

关于何时使用 lambdas 的真正好读物：https://stackoverflow.com/a/23045200/1961059

【讨论】：

【解决方案2】：

this in handleError 在您的情况下可能不是您认为的那样。

尝试执行以下操作：

this.http.get(url,
              ApiRequest.ACCEPT_JSON)
              .map(ApiHelper.extractData) 
              .catch(this.handleError.bind(this)); // <-- add .bind(this)

【讨论】：

【解决方案3】：

可能的解决方案是将您的服务分配给类的静态变量

ClassToHandleError {
   private static loginService: LoginService;

   constructor(private loginService: LoginService) {
      ClassToHandleError.loginService = loginService;
   }

   private handleError(error: any) {
    console.error(error);
    console.log(ClassToHandleError.loginService); // here you can use static reference
    return Observable.throw(error);
   }
}

我知道这只是一种解决方法，而 rinukkusu 提供了比我更好的解决方案。我一直使用它，直到我解决了这个问题。但也许在某些特殊情况下，这对某人来说很有价值:)。

【讨论】：