角度提供者,循环依赖性错误

时间:2017-12-12 08:44:39

标签: angular http dependencies httpclient cyclic

我收到此错误:
提供者解析错误:无法实例化循环依赖!

我有一个组件可以对我的后端进行http调用:
backend.component.ts

import { HttpClient } from '@angular/common/http';
public basicQuery(): void {
  this.httpClient.get('http://...')
    .subscribe(
    (response) => {

    },
    error => {

    });
}

我每次通话都使用拦截器 的 token.interceptor.ts

public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  request = request.clone({
    setHeaders: {
      token: this.auth.getToken()
    }
  });

  return next
    .handle(request)
    .do(
    (response: HttpEvent<any>) => {
    },
    (error: any) => {
      return false;
  });
}

如果我收到错误,我会在自定义错误处理程序中处理此问题,因为我想将错误发送到我的后端。
定制错误handler.ts

handleError(error): void {
  this.errorLogService.logServer(error);
  super.handleError(error);
}
因此,我使用了一项服务 的 errorLog.service.ts

import { HttpClient } from '@angular/common/http';
logServer(error: Error) {
  this.httpClient.post('http://...', JSON.stringify(error.message))
    .subscribe(
    (response) => { },
    (error) => { });
}

这就是问题所在,因为我也使用了httpClient。 但是我怎么能避免这种失败呢,它是怎么回事? 现在我使用&#39; Http&#39;而不是&#39; HttpClient&#39;。

更新1

private auth: AuthService;

constructor(
  private utils: Utils,
  private router: Router,
  private injector: Injector
) {
  this.auth = this.injector.get(AuthService);
}

public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  request = request.clone({
    setHeaders: {
      token: this.auth.getToken()
    }
  });

  return next
    .handle(request)
    .do(
      (response: HttpEvent<any>) => { },
      (error: any) => { return false }
    );
}

更新2

将AuthService和路由器注入正文可以解决问题:

public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const started = Date.now();

  this.auth = this.injector.get(AuthService);
  this.router = this.injector.get(Router);

  (...)
}

1 个答案:

答案 0 :(得分:2)

以下是如何执行此操作的方法,不要在构造函数中注入服务,而是在函数体中执行此操作。在这里,您也不会遇到最大呼叫达成的问题。

@Injectable()
export class YourInterceptor implements HttpInterceptor {
  yourService: YourService;
  constructor(private inject: Injector) {
    //this.yourService = inject.get(YourService);
  }

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {

    this.yourService = this.inject.get(YourService);

    request = request.clone({
       setHeaders: {
          token: this.YourService.getToken()
       }
    });

    return next.handle(request);    
  }
}

根据你的构造函数试试这个,

private auth: AuthService;
private router: Router;

constructor(
  private utils: Utils,
  private injector: Injector
) {

}

public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  this.router = this.injector.get(Router);
  this.auth = this.injector.get(AuthService);
  request = request.clone({
    setHeaders: {
      token: this.auth.getToken()
    }
  });

  return next
    .handle(request)
    .do(
      (response: HttpEvent<any>) => { },
      (error: any) => { return false }
    );
}